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

[Jen]

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

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

http://jensocial.com/group/ningnetworktips

This is the type of step-by-step instructions and quality of tip you will find in the Premium Group on JenSocial, and one of those I call: a Sweet Little Tip. I added this premium tip to the 100s of Free Tips on JenSocial, as a premium example. I thought you all would thoroughly enjoy this tip too.

 

This code isn't fancy. 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.

 

Unfortunately I can't install a Working Example on Creators. Go here for working example. This tip may look like a challenge, but no kidding, it is so easy. You have 3 easy steps. And the results are awesome.

Screen Shot of Both CSS Examples:

 

Get Creative! ToggleContentTextBox_GetCreative.txt

 

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.

ToggleContentCSS.txt
CSS with Green Plus Sign 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 on JenSocial in Jen's 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. ;-)

Enjoy!

[Jen]

LOL, happy you like it.

=)

Best,

Jen

[SweetPotato]

Hey Jen, great tip but i can't get it to work on my test network, the items load as open and stay that way.

[Jen]

I was told yesterday by one of our premium members, it won't work on the test site. Add all your code, and try in a group text box, or somewhere behind the scenes.

Best,

Jen

[SweetPotato]

Thanks Jen, I'll give it ago

[Jen]

Mark,

Also, once you add, be sure to refresh screen.

Best,

Jen

[MAXX]

I created a news section with this tip.  Using www.rssfeedwidget.com, I created rss feeds relevant to my site that display upon clicking on the toggler.  You can see it here: www.mycoachbook.com

 

Jen, is it possible to display an image to the right of the toggle menu once I shorten each header so that I don't waste all of that empty space in the wide column?

[SweetPotato]

Looks great. The only issue with it, and I noticed this on Jen's site too, is that because the JS loads last on Ning, the content of all headings is momentarily displayed while the page loads. Anyway round this?

[Jen]

No sorry, not to my knowledge. I've tried to add script to text boxes, and this used to work. It won't work for me now, not even if I wrap in DIV. You will find this issue for all code like this. Hopefully someday Ning will wake up and do two things to make this more of a standard platform environment - - which they did have when I first signed on, kinda sad isn't it?

• FTP File hosting - - with limitations and more fees if that's what it takes.
• Ability to add code to <HEAD> tag.

Best,

Jen

[Jen]

MAXX,

Be sure that you only change the width of toggle_head, so you have room for content - - unless your content is the same width.

I think the only way to do it without breaking the code, is wrap an outer DIV around everything, and float an image right. Here's my test code via firebug. Test this and you'll see what I mean:

<div id="outermostdiv"><p> <img src="http://api.ning.com/files/HM02iIoHbE*4J1oZJBvxlcS44jC8anDzTbXtbF3CZ0aMNGtu2x9ZKKNmfpkkOIuyQBbVPr3Y2gdcNfL7pbP5oULOUBZgNffi/privateparty8.jpg" style="width:90px!important;float:right;"></p>
<div style="width: 650px ! important;" class="toggle_list"><p class="toggle_head">Featured Video</p>
<div class="toggle_body" style="display: none;"><center>no video this week</center>
</div>
<p class="toggle_head">Photo of the Week</p>
<div class="toggle_body" style="display: none;"><center><img border="5" src="http://api.ning.com/files/QAISxEUzjDB7VpRqeS4dHl4AAbZtsCPshcWgj*wGffWyKtTUOJ8BpZwJjJJxxBtXys1AzimUBIxwa0ha55nQ87fTer8o3Lgl/join600by338.jpg"></center>
</div>
<p class="toggle_head">Member Spotlight!</p>
<div align="center" class="toggle_body" style="display: block;"><a href="http://yourning.com/profile/member_page" target="_self"><img width="283" border="10" src="http://api.ning.com/files/BcMVz*vkDCaSRCP2JQolxd3NU25Ynq4ET1GFN8PHgC8NdsQmkjLVtBJi1NYBCuI6u6CW0W7-UkQ4114f32ChjfSRJGqqw5aZ/memberspotlight_ex.jpg"></a></div>
</div>

<!-- END outermostdiv -->

</div>

[Jen]

LOL, glad you like it.

=)

[J.Wings]

great one jen. One question I have for someone who is more javascript savvy than me:

 

since the content in the hidden divs was there in the original HTML before the javascript got ahold of it, does this mean that search engines can see it even though it was hidden?

 

that would be awesome!

 

otherwise, there is some content i wouldn't want to display this way, because making it invisible to search engines would have a negative impact. Still, I've got a lot of uses for this swirling around in my head.

[Jen]

j. wings,

Good question - - The content should be picked up, just as if it's not hidden. Because technically, it's not hidden. For example, if you go to the working example (the first one), click on Your Header-2. You will see part of the content is "Sed vulputate odio dolor,". If you view source, and search on that string (in bold), you will find it.

Best,

Jen