Toggles Not Working

[FNFWeb]

Hello,

I have some toggles set up on this page:
http://essential-essentials.com/essential-oils-benefits-information/recipes/bombs-and-shots/

But they’re not working at all. They just display everything as usual.

I’ve tried deactivating all plugins – didn’t make a difference. Here is the raw code:

[spb_toggle title=”Toggle title” open=”false” width=”1/1″ el_position=”first last”]

The toggle content goes here, click the edit button to change this text.

[/spb_toggle] [spb_toggle title=”Toggle title” open=”false” width=”1/1″ el_position=”first last”]

The toggle content goes here, click the edit button to change this text.

[/spb_toggle]

[Swift Ideas – Ed]

Hi there,

Thanks for letting us know about this! Fixed for the next update. You can fix now by adding custom css to the panel within theme options:

.toggle-wrap .spb_toggle {
	padding: 10px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.toggle-wrap .spb_toggle:hover {
	cursor: pointer;
}
.toggle-wrap .spb_toggle_title_active {
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.spb_toggle_content {
	padding: 10px;
	border: 1px solid #e3e3e3;
	border-top-width: 0;
	display: none;
}
.spb_toggle_content p:last-child {
	margin-bottom: 0;
}

– Ed

[creativerunway]

Adding that code doesn’t seem to fix the toggles. I’ve added toggles via the Swift Page builder, then added the CSS code and only plain text is shown on the page

[Melanie – SUPPORT]

Hey, care to post up your website URL so we could check it out?

[creativerunway]

This reply has been marked as private.

[Mohammad – SUPPORT]

@creativerunway – Its displaying perfect here so please check with after clear cache and hard refresh [ctrl+f5] .
Thanks 🙂
With Best Regards
Swift Ideas

[creativerunway]

Hmm, I’ve cleared the cache and hard refreshed, and still seeing the same thing. You sure you are looking at the toggles, not the “accordion”? There are two different elements I’m testing:
*accordion: the two columns under 2013 and 2014, which are working.
*toggle: the text below, starting with the words “toggle title”
(see screenshot)
The “accordion” and the “toggle” are two separate items/options in the page builder. The accordion seems to be working, but the toggle does not (it just yields the text you see in the screenshot)

[Melanie – SUPPORT]

Hey, sorry for the confusion, it is indeed not working.
Can you send us your login details in a private reply? We’ll check it out!

First make sure you’re on the latest version of the theme please!

[creativerunway]

I’ve moved the site to a production domain: http://www.teresacollinsdesigns.com/wholesale/

I’ve updated to the most recent version of the theme (1.73), and it seemed to *partially* fix the problem…the toggle is now working, but it doesn’t clearly “look” like a toggle…for example, when hovering, my pointer changes to a cursor.

Anyways, it seems like its almost there. Do you still need login details? Or is there something I can do?

[Swift Ideas – Ed]

Very odd – not sure why this css is missing, but add this and it will sort it for you!

.toggle-wrap {
	margin-bottom: 15px;
}
.toggle-wrap .spb_toggle {
	padding: 10px 15px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	position: relative;
}
.toggle-wrap .spb_toggle:after {
	content: "\f067";
	font-family: FontAwesome;
	right: 20px;
	bottom: auto;
	top: 50%;
	margin-top: -9px;
	position: absolute;
	font-size: 16px;
}
.toggle-wrap .spb_toggle_title_active:after {
	content: "\f068";
}
.toggle-wrap .spb_toggle:hover {
	cursor: pointer;
}
.toggle-wrap .spb_toggle_title_active {
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.spb_toggle_content {
	padding: 10px;
	border: 1px solid #e3e3e3;
	border-top-width: 0;
	display: none;
}
.spb_toggle_content p:last-child {
	margin-bottom: 0;
}

Hope that helps.

– Ed