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:

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.


/* 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:

Tags: collapse, collapse DIV, expand, expand list, expanding collapsing, links that open, open close content, open close links, toggle, toggle content

Views: 2546

Replies to This Discussion

Great!

Thanks a lot Jen!

I will need this soon...

I followed the instructions. 

This is what I get. All the text is visible, no toggle effect 

 

Is this on a test network or live? If test, it will not work. Otherwise, leave a link and I'll take a look tomorrow, 3:30AM, and calling it a night.

Also, be sure to refresh your screen after installing textbox code.

=)

Best,

Jen

Hi Jen,

I had to add (as instructed by you on Ning Creators) the javascript code for jquery in my custom box for it to work.

 

And to top it all, I was testing it in a COMMENT BOX... 

It seems to work better in main text boxes

 

Now

It Works when I try it in Text box like under a video on my site. 

See it here, under the main video >> http://mixbeat.com/video/pubards-1

Good job!

I guess I better add the jQuery to the tips. I thought since Ning loads it, we shouldn't load it again. I'll try to do that next week, gotta go help with family a couple of days.

Best,

Jen

I'm having this same problem. I added all the custom & advanced CSS, then went back and added the extra javascript - still nothing.

Did you refresh the screen?

Please give link where you've added the code.

=)

I sure did refresh, several times actually just for good measure. :P

I have it on the main page in the very last text box in the right column for now. I want it to stay in that column, just move up when it's done.

http://www.retrolifestyle.com

 

Taking a look in the next 5 minutes...

Try moving this:

I can't add the script here, DOH. Move the entire script tag for the following js file:

'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'
above the Toggle code. It has to execute first.

No single quote start and end. For some reason had to add that here.

Gonna wait and see if that does it.
=)
oh. duhhh. That totally makes sense and was exactly the problem. Thank you!!

My fault really for trying to keep folks from loading the jquery over and over. I need to word that better in the tip.

Glad it worked out.

Best,

Jen

RSS

Members

© 2014   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips