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:
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.
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.
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 */
width: 467px; /* Width of Content Area */
padding: 5px 10px;
background-color:#83D13D; /* Header Background Color. Remove for none. */
color:#ffffff; /* Header Text Color */
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.
<!-- Toggle Content -->
//hide the all of the element with class toggle_body
//toggle the content with class toggle_body
// 200 is good for fast, and 600 for slow open
<!-- End Toggle Content -->
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. ;-)
Sweet little tip is far too modest. It's small and brilliant! - thanks! I would very much like to use it, but in trying it out, I face a problem: The "slide" function is not working in my Text-Box.
Safari 5.0.3 says
TypeError: Result of expression '$' [undefined] is not a function.
right after the
Any idea what I have missed ? (I did follow your tutorial, and used your example)
Let me look into this. I'll get back to you.
I've seen this before - - not for this code, but others. It works fine in my Safari, but I'm PC based. I won't be able to troubleshoot and possibly fix this for you, because I can't test.
See this article:
You may have to add an extra js load in your custom code box like this:
But honestly, since Ning already loads jquery, not sure if this will cause other errors, even if it happened to fix this one.
Do make sure you used the attached text file, instead of copying the code from the discussion. It could make a difference. If none of this makes a difference, really sorry. You probably won't be able to use it.
I changed the CustomCode as you suggested and the error-message disappeared. Thanks. The hiding/sliding however is still not happening. I tested it also with IE 8.0.6 on Windows XP. Same results.
I'm using IE 8.07, and no problems. Only other suggestion I have: add your custom code and text box code here, in text files. I'll take a look. Sorry it's not working for you.
Ok, I got it working now!!
did the trick! Only, I got the <script .. ></script> syntax wrong in the first place.
I attach my CustomCode, i case other NC will have the same problem.
Cool! Thanks for the update, and the code.
It's me thanking you!
Good night from Copenhagen =)
Thank you bunches Nis for supplying the fix because I was having the same problem & MANY, MANY thanks to you as always Jen!!
I messed up by not loading the jquery.min.js in the first place. So used to NCs having it, and try to keep from overloading the "loads". But, I should have added that to the original tip. I have now, like this:
NOT WORKING? If the tabs do not open/close after refresh, you may have to add an extra js load in your custom code box like this:
Sorry for the trouble to both of you.
Two Tears are coming out of my eyes right now. As this tip solves one of my biggest problems.