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

Jen's Premium Ning Tips

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: <!-- Toggle Content --> 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:

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