Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • jen, I would like to thank you for all the tips and tutorials that share with everyone.  I can't wait to try it out. Your tutorials always are so easy to follow.  Thanks again.

     

    thanks
    • NC for Hire

      Thanks Judy, appreciate the kind words. :-) I wish I could show the working examples here on Creators, but it takes adding script. And that's not possible here. Let me know how it goes, would love to see what you do with it.

      Best Regards,

      Jen

    • I agree
  • Awesome! Going to test this out on my network right now.
    • NC for Hire
      I want to seeeee what you come up with!
  • This reply was deleted.
    • NC for Hire
      LOL, that'd be nice. Thanks, glad you like it!
    • +1
  • Thanks Jen!  I actually was trying to implement this on my site using the code from one of those coding sites but couldn't get it to work.  I was debating on signing up for your premium tips just for this one, but now you saved me some $$$ =)  I will have to make a donation!
    • NC for Hire

      Glad you like it MAXX! With your imagination, definitely want to see what you do with it. This will fool you.  A ton of Creative things could be done using this code.

       

      Why a donation, when it's only $29.95 a year for many premium tips, and support. One tip is worth the yearly subscription. If you're not ready to join, just enjoy the sampler tip. ;-)

       

      On joining the group, this tip is what I call a "Sweet Little Tip". It's not even considered to be one of the impact tips. One of our VIP Members Sandra SaFire actually inspired this tip. 

       

      Enjoy,

      Jen

  • Jen,

     

    Another great tip (as usual).

    I use something similar in my network, but it is much more limited. (only HTML and JAVA)   

    Yours give us so many more options.

    Thanks

    Pedro

     

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I agree with you, but I want it rounded, on the square it gives no problem,this is an impossible…"
3 hours ago
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"It's because you are using the ridge as a border, to create the ridge the border property adds the…"
4 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I don't want to go below 13 px I know all would be ok but it's too logical"
7 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"#xg_masthead /*Top Image*/ {margin: auto;display: block;height:600px;width: auto…"
7 hours ago
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
" show the css you have used for the border"
7 hours ago
Rosas † Negras posted a discussion
9 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"OH MY GOD!!!! :D :D :D It worked!!!
 
I am so pleased. Thank you Bizz and Rosas for your help. I…"
14 hours ago
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"Thank you Rosas and Bizz.
I am afraid I do not understand these instructions.
I will see if I can…"
14 hours ago
Anam and Rosas † Negras are now friends
14 hours ago
Pam Givens replied to ⚡JFarrow⌁'s discussion
TIP: 😳Friendly Reminder for Visitors Who Copy Your Content in 3 Easy Steps
"Hi Bizz where do I put that code?  I will use the one about copying from my whole site.  That will…"
yesterday
Bizz replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"I would do it this way instead of using the ningbar, this way it does not matter how tall your ning…"
yesterday
Rosas † Negras replied to Steve C's discussion
Ning 2 new member welcome image: Can I remove or replace it?
"I read later, the link to delete the whole box was missing"
yesterday
More…

Meanwhile, you can check our social media channels