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 Bill Vasko on July 24, 2011 at 7:35pm

Jen, I am trying to get a banner to fit under by toggle bars in a module where I also have an image to the right of the toggle bars. It's on my main page. Trying to get rid of the empty space, but no luck. Here is my code:

<div id="outermostdiv">
<p><a href="http://www.mycoachbook.com/page/coachbook-job-board-updated"><img src="http://i187.photobucket.com/albums/x172/billvasko/jobs.jpg" style="width: 200px!important; float: right;" /></a></p>
<div class="toggle_list">
<p class="toggle_head">Football Coaching News</p>
<div class="toggle_body">
<div id="widgetmain" style="text-align: left; overflow-y: auto; overflow-x: hidden; width: 500px; border: 1px solid #333333;">
<div id="rsswidget" style="height: 270px;"><iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1304302345257&x=http%3A%2F%2Fnews.google.com%2Fnews%3Fpz%3D1%26cf%3Dall%26ned%3Dus%26hl%3Den%26q%3Dfootball%2Bcoach%26cf%3Dall%26output%3Drss&w=500&h=270&bc=333333&bw=1&bgc=transparent&m=20&it=false&t=%28default%29&tc=333333&ts=15&tb=transparent&il=true&lc=333333&ls=12&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" marginwidth="0" marginheight="0" style="border: 0pt none; padding: 0pt; margin: 0pt; width: 475px; height: 256px;" id="rssOutput" frameborder="no">Reading RSS Feed ...</iframe></div>
<div style="text-align: right; margin-bottom: 0pt; border-top: 1px solid #333333;" id="widgetbottom"><span style="font-size: 70%;"><a href="http://www.rssfeedwidget.com">rss feed widget</a> </span></div>
</div>
</div>
<p class="toggle_head">College Football Headlines</p>
<div class="toggle_body">
<div id="widgetmain" style="text-align: left; overflow-y: auto; overflow-x: hidden; width: 500px; border: 1px solid #333333;">
<div id="rsswidget" style="height: 490px;"><iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1304301964621&x=http%3A%2F%2Fbleacherreport.com%2Farticles%2Ffeed%3Ftag_id%3D23&w=500&h=490&bc=333333&bw=1&bgc=transparent&m=20&it=false&t=%28default%29&tc=333333&ts=15&tb=transparent&il=true&lc=333333&ls=12&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" marginwidth="0" marginheight="0" style="border: 0pt none; padding: 0pt; margin: 0pt; width: 475px; height: 465px;" id="rssOutput" frameborder="no">Reading RSS Feed ...</iframe></div>
<div style="text-align: right; margin-bottom: 0pt; border-top: 1px solid #333333;" id="widgetbottom"><span style="font-size: 70%;"><a href="http://www.rssfeedwidget.com">rss feed widget</a> </span></div>
</div>
</div>
<p class="toggle_head">Basketball Coaching News</p>
<div class="toggle_body">
<div id="widgetmain" style="text-align: left; overflow-y: auto; overflow-x: hidden; width: 500px; border: 1px solid #333333;">
<div id="rsswidget" style="height: 270px;"><iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1304302412219&x=http%3A%2F%2Fnews.google.com%2Fnews%3Fpz%3D1%26cf%3Dall%26ned%3Dus%26hl%3Den%26q%3Dbasketball%2Bcoach%26cf%3Dall%26output%3Drss&w=500&h=270&bc=333333&bw=1&bgc=transparent&m=20&it=false&t=%28default%29&tc=333333&ts=15&tb=transparent&il=true&lc=333333&ls=12&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" marginwidth="0" marginheight="0" style="border: 0pt none; padding: 0pt; margin: 0pt; width: 475px; height: 256px;" id="rssOutput" frameborder="no">Reading RSS Feed ...</iframe></div>
<div style="text-align: right; margin-bottom: 0pt; border-top: 1px solid #333333;" id="widgetbottom"><span style="font-size: 70%;"><a href="http://www.rssfeedwidget.com">rss feed widget</a> </span></div>
</div>
</div>
<p class="toggle_head">College Basketball Headlines</p>
<div class="toggle_body">
<div id="widgetmain" style="text-align: left; overflow-y: auto; overflow-x: hidden; width: 500px; border: 1px solid #333333;">
<div id="rsswidget" style="height: 490px;"><iframe src="http://us1.rssfeedwidget.com/getrss.php?time=1304302056027&x=http%3A%2F%2Fbleacherreport.com%2Farticles%2Ffeed%3Ftag_id%3D22&w=500&h=490&bc=333333&bw=1&bgc=transparent&m=20&it=false&t=%28default%29&tc=333333&ts=15&tb=transparent&il=true&lc=333333&ls=12&lb=false&id=false&dc=333333&ds=14&idt=false&dtc=284F2D&dts=12" border="0" hspace="0" vspace="0" marginwidth="0" marginheight="0" style="border: 0pt none; padding: 0pt; margin: 0pt; width: 475px; height: 465px;" id="rssOutput" frameborder="no">Reading RSS Feed ...</iframe></div>
<div style="text-align: right; margin-bottom: 0pt; border-top: 1px solid #333333;" id="widgetbottom"><span style="font-size: 70%;"><a href="http://www.rssfeedwidget.com">rss feed widget</a> </span></div>
</div>
</div>
<a target="_blank" href="http://www.punchtab.com/mast/index2?domain=www.mycoachbook.com&key=040a1efd2772c2adac7d920788eeb195&specific_activity="><img class="align-center" src="http://api.ning.com:80/files/yi7AHIGFs8tTr59LQN3TnwWR7BZM*j4QBxPQ3oitsgOxhPYScL825*nbl0KGzrQGgzRu0e*itgfDPgUaqb1TpUHogUd2d40N/rewards2.jpg" /></a></div>
</div>

Permalink Reply by JenSocial on July 25, 2011 at 8:49pm

Wow, my eyes can't follow all of your DIVs. So, I'll suggest adding yet another DIV, LOL! I think your best bet is to remove the class in the banner image:

class="align-center"

and instead, center with the DIV align=center like this:

Best,

Jen

Permalink Reply by PetBrags Pet Community on August 1, 2011 at 1:15pm

Hi Hub City,

It's Jen signed in as PetBrags. I can't access anything with the Creator account until Ning fixes this most recent bug.

hmmm, I haven't heard this one yet. I did have another tip that was causing this. And I can't remember what it was, dang it. I will. It was something that wasn't important fortunately.

I just moved my profile status update to another location on JenSocial. But, I'm not using this tip on home page.

Try this first. Try moving the code to another location in Custom Code Box, from top to bottom - - or bottom to top.

Then, if that doesn't work, try adding the Custom Code script to the top of same text box where you add the Toggle Code. I can't test yet, until I can get into my Network Creator account.

Let me know,

Jen

Permalink Reply by JenSocial on August 1, 2011 at 1:59pm

Try this. Add this code in place of the Custom Code Box code.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/981290945?profile=original"></script>

Please let me know.

Best,

Jen

Permalink Reply by Milan Olsavsky on November 28, 2011 at 11:37am

Now we can add this code just for one page :-) and will working fine

<script type="text/javascript" src="http://storage.ning.com/topology/rest/1.0/file/get/981290945?profile=original"></script>
<script type="text/javascript">

$(document).ready(function()
{
//hide the all of the element with class toggle_body
$(".toggle_body").hide();
//toggle the content with class toggle_body
$(".toggle_head").click(function()
{
// 200 is good for fast, and 600 for slow open
$(this).next(".toggle_body").slideToggle(600);
});
});
</script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Permalink Reply by Bill Vasko on August 2, 2011 at 6:42pm

Thanks Jen, that did the trick!!!

Permalink Reply by Fire-Tech on August 2, 2011 at 10:05pm

Hey Jen,

This is by far one of my favorite tips for my main page next to your floating images. I have special group that I'd like to use your code for this layout, but I can't find it anywhere in JS, our VIP's or Creators.

Any help would be appreciated.

Thanks

Permalink Reply by JenSocial on August 4, 2011 at 1:26pm

Hi Fire-Tech,

Here you go:

http://jensocial.com/group/premiumningtipsbyjen/forum/topics/accord...

Sorry you couldn't find it. It's listed as an Image Slider in the Socrata. It really should be listed as a Toggle. I'll add toggle to the keyword tags.

Best Regards,

Jen

Permalink Reply by Fire-Tech on August 4, 2011 at 3:11pm

Thank you my dear! You are the greatest. I'm past due for a contribution so I'll do it before I forget.

Add this to your never ending list. No big rush.

Glad you logged in as Petbrags. Reminds me that I need to make a group there. Been too busy with my network.

Thanks again,

Tom

Permalink Reply by JenSocial on August 5, 2011 at 9:50pm

Great, glad it worked out!

Permalink Reply by SurferShot on October 6, 2011 at 9:57pm