JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Toggle Content with Links - - Great Space Saver and Just Plain Cool!

This Tip came from our VIP Club for Ning Network Creators:

Original Code Users Pre-November 19, 2011 - After Ning updated the jQuery Lib, you need to update your code in Custom Code Box, for this tip. Search for:  Replace entire block with:

ToggleContentCustomCodeBox_without_jscall.txt

This code isn't fancy, yet not far removed from the Accordion Slider in functionality. It's a clean and simple way to display links with toggled content. When a link is clicked, content is displayed below the link. It's a nice space saver, and just cool - - one of our Sweet Little Tips. ;-)

Example:

Your Header-1

Your Content for Link #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem lacus. In ultricies dolor et tellus posuere ut ornare ipsum commodo.

Your Header-2

Your Content for Link #2 - Donec vel quam arcu. Integer auctor tristique consectetur. Mauris vel mollis eros. Nulla facilisi. Curabitur nec diam lacus, vitae luctus nunc. Sed vulputate odio dolor, et bibendum mi. Suspendisse vitae sem ac lectus mollis scelerisque vel quis augue.

Your Header-3

Your Content for Link #3 - Curabitur nec diam lacus, vitae luctus nunc. Sed vulputate odio dolor, et bibendum mi. Suspendisse vitae sem ac lectus mollis scelerisque vel quis augue.

Get Creative! ToggleContentTextBox_GetCreative.txt

Featured Video

Photo of the Week

Member Spotlight!

Installation Overview: Edit the code for Text Box, adding as many links/content you need to add. Each DIV has an assigned class identifier for the header (toggle_head) and body content (toggle_body), and noted in example code. Wrap all of the code in one DIV with class="toggle_list". Edit the CSS by changing the width, header and body (text and background colors). Edit the Custom Code for the speed of the open/close action. Add your edited code to the appropriate boxes - - in notes.

Edit Code Below, Adding Your Content. Add Finished Code to Text Box. Be sure to click on the HTML button when adding your code.

ToggleContentTextBox.txt

<div class="toggle_list">
<p class="toggle_head">Your Header-1</p>
<div class="toggle_body">Your Content for Link #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem lacus. In ultricies dolor et tellus posuere ut ornare ipsum commodo.</div>
<p class="toggle_head">Your Header-2</p>
<div class="toggle_body">Your Content for Link #2 - Donec vel quam arcu. Integer auctor tristique consectetur. Mauris vel mollis eros. Nulla facilisi. Curabitur nec diam lacus, vitae luctus nunc. Sed vulputate odio dolor, et bibendum mi. Suspendisse vitae sem ac lectus mollis scelerisque vel quis augue.</div>
<p class="toggle_head">Your Header-3</p>
<div class="toggle_body">Your Content for Link #3 - Curabitur nec diam lacus, vitae luctus nunc. Sed vulputate odio dolor, et bibendum mi. Suspendisse vitae sem ac lectus mollis scelerisque vel quis augue.</div>
</div>

Tip: If you want to add multiple expandable DIVs, you can force the width of each one, overriding the CSS, like this:
<div style="width: 600px!important;" class="toggle_list">

Edit CSS Below, and Add to Advanced CSS. See comments for changing width, background and font colors, for header and body.

Plain Jane Version, with background color - ToggleContentCSS.txt
Green Plus Sign Version, with background image -ToggleContentCSS_withplus.txt


/* CSS for Toggle Content */
.toggle_list {
margin: 0px;
padding: 0px;
width: 467px; /* Width of Content Area */
}
.toggle_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#83D13D; /* Header Background Color. Remove for none. */
margin:1px;
color:#ffffff; /* Header Text Color */
}
.toggle_body {
padding: 5px 10px 15px;
background-color:#F2FFE1; /* Body Background Color. Remove for none. */
color:#333333; /* Body Text Color */
}
/* End CSS for Toggle Content */

Edit code below, and Add to your Custom Code Box.

Change the 200 for open/close speed. 600 is good for slow open/close.
Add to your Custom Code Box via: My Network/Tools/Custom Code

ToggleContentCustomCodeBox_without_jscall.txt

<!-- Toggle Content -->
<script type="text/javascript">
//hide the all of the element with class toggle_body
x$(".toggle_body").hide();
//toggle the content with class toggle_body
x$(".toggle_head").click(function()
{
// 200 is good for fast, and 600 for slow open
x$(this).next(".toggle_body").slideToggle(200);
});
</script>
<!-- End Toggle Content -->

I've tested this fairly well. You should be able to add multiple toggle links throughout your site. Naturally, with your edited CSS, all occurrences will have the same colors, etc...
Make sure you reload your page, immediately after text box install or edits.
In the CSS Examples, to add a border bottom to your headers, I used this code: border-bottom: 1px dashed #C0C0C0;Add to your ".toggle_head".

Enjoy! If you're a Ning Network Creator, join us in the VIP Group. It's a great place to chat about all kinds of great topics, business and fun! Just ask any of our 100+ members. ;-)

Another GREAT TIP AND SPACE SAVER - Tabbed Content Boxes

Example Tabbed Content:

Special Ning Tips
Add Your Social Network
Texting and Driving - DON'T

2 members favorited this

Replies to This Discussion

Permalink Reply by Shannon Klipstein on November 27, 2011 at 4:21pm

Thanks so much! Looks great ! I love it !!

Permalink Reply by JenSocial on November 28, 2011 at 1:53pm

Great, thanks for the feedback!

Permalink Reply by JenSocial on November 30, 2011 at 10:00pm

CRITICAL ANNOUNCEMENT:

A lot of Ning Networks are experiencing issues with jQuery conflicts after Ning updated their jQuery lib. Custom Code that calls in an extra jQuery lib file needs to be modified. For this tip do the following. IT IS CRITICAL THAT YOU MAKE THIS CHANGE:

ToggleContentCustomCodeBox_without_jscall.txt

Permalink Reply by reign25 on February 18, 2012 at 9:11am

Hi Jen! This is so cool! I've tried it in our ning site. However, I think there's something wrong because there is no space in between the toggle heads. Can you help me fix that? Thanks much! :-)

Permalink Reply by JenSocial on February 18, 2012 at 3:04pm

If you can provide a link where this is installed, I'll take a look.

Best Regards,

Jen

Permalink Reply by reign25 on February 19, 2012 at 12:51am

Here's the link: http://www.aynla.org/nleresults/june2012/room-assignments

I also installed it in this page: http://www.aynla.org/nleresults

Thanks much Jen!

Permalink Reply by JenSocial on February 21, 2012 at 4:53pm

This is the first time I've seen a default ning theme mess this up. I couldn't get the 2nd link page to work. Correction: it works on both. I think I forgot to add to top of CSS on the 2nd page.

I got this to work only if I added the CSS to top of CSS. You have some type of error towards the bottom of your Advanced CSS, which breaks everything below it.

p.toggle_head {
margin-top: 10px!important;
}

Best Regards,

Jen

Permalink Reply by reign25 on February 24, 2012 at 11:56pm

It works perfectly now. Thank you Jen! Cheers! :)

Permalink Reply by JenSocial on February 25, 2012 at 12:07am

Great! Always happy to hear this sort of news. =)

Permalink Reply by SurferShot on March 1, 2012 at 8:29pm

My toggle content from this tip has suddenly stopped working on a basic html site that I use it on.

You can view it here: http://surfershot.com/surf_shop.php (the left column)

If the page show it collapsed it will not expand, or if the page shows it already expanded it will not collapse.

However it's still working fine on my Ning site.

A few month back you had everybody change the head tag. Could this be the problem and need to be changed again?

Permalink Reply by JenSocial on March 1, 2012 at 9:03pm

I really don't know, especially on an external site. My guess is, did you happen to remove the jquery call? Because that file is needed, and I would only suggest removing the call from a ning site, since ning updated their jquery library.

Hope that helps,

Jen

Permalink Reply by SurferShot on March 1, 2012 at 9:11pm

The jquery code that you gave us to place into the "Custom Code" box is the same code I used to place inside the <head> tags of my html site. It has been working fine until a few days ago (didn't change anything).

If you know of any other type of toggle content that is comparable to this off the top of you head please let me know.

In the meantime I'm going to do some Google research to find another way.