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:

Views: 3603

Replies to This Discussion

Code like this doesn't just stop working for no reason. Something had to change, and probably a platform change. For example, maybe when Ning loaded the jQuery.js file, it spilled over (was still loaded) to your php pages, and now it is not. Really, I wouldn't know.  This code was written for Ning sites, and even there it could break someday if Ning makes some unexpected or odd changes. However, as you have proven, it should work on other sites too (looks great btw) if code is placed in appropriate areas - - as you have done. I think it would work if you just added a load to the jQuery file, right above the other script for this tip. I can't find jQuery in your source code. This code cannot work without the jQuery library being loaded.

You can just load the jQuery from Google with this code. I think there's a brand new version, but this should be good:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Hope that helps,

Jen

Yaaaa! That google code worked! That saved me so much time.

You may not see it in my php sites source code because that left column is being called in via .php.

Thank you!

Hence why your VIP membership was worth it, right? ;-)

Very happy that did it!

Have a great weekend,

Jen

This is such an awesome tip! I've expanded my toggle content to use as a left side column store menu with rollover menu pictures. See it work at http://surfershot.com/surf_camera.php

Great! Looks great as your site always does. =)

Amazing tip Jen!!!

How can I add it to my account box?

Hi Glenn,

Happy you like the tip. In regards to your questions, since the account box is not directly editable, I don't see a reasonably straightforward way to do this.

Best,

Jen

Hi Jen, It's been awhile I know.

Is there anyway to make this work with the "toggle_head" going horizontal across instead of stacked up vertically?

If I were to make 3 columns then it would only drop down vertically in that same column width. I need the width of the whole page to show the drop down content.

I'm trying to save some above the fold space.

Oh wait! I just scrolled down the page an saw the Tabbed Content Boxes. Never mind!

This is a great tip!!!

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips