open-close-links - FORUM - Ning Creators Social Network2024-03-29T05:49:12Zhttps://creators.ning.com/forum/topics/feed/tag/open-close-linksToggle Content with Links - - Great Space Saver and Just Plain Cool!https://creators.ning.com/forum/topics/toggle-content-with-links2011-04-29T07:37:39.000Z2011-04-29T07:37:39.000ZJenhttps://creators.ning.com/members/Jen<div><p><span class="font-size-4"><strong>Toggle Content with Links - - Great Space Saver and Just Plain Cool!</strong></span></p>
<p><span style="color: #ff0000;"><strong>Original Code Users Pre-November 19, 2011 -</strong> <span style="color: #000000;">After Ning updated the jQuery Lib, you need to update your code in Custom Code Box, for this tip. Search for:</span></span> <!-- Toggle Content --> <span style="color: #000000;">Replace entire block with:</span></p>
<p><span style="color: #000000;"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546365?profile=original">ToggleContentCustomCodeBox_without_jscall.txt</a></span></p>
<p><span style="color: #000000;"><br></span></p>
<p><a rel="nofollow" href="http://jensocial.com/group/ningnetworktips" target="_blank">http://jensocial.com/group/ningnetworktips</a></p>
<p>This is the type of step-by-step instructions and quality of tip you will find in the <a rel="nofollow" href="http://jensocial.com/group/premiumningtipsbyjen" target="_blank">Premium Group</a> on JenSocial, and one of those I call: a Sweet <strong>Little</strong> Tip. I added this premium tip to the 100s of Free Tips on JenSocial, as a premium example. <strong>I thought you all would thoroughly enjoy this tip too.</strong></p>
<p> </p>
<p>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.</p>
<p> </p>
<p><strong><span class="font-size-4">Unfortunately I can't install a Working Example on Creators. Go here for <a rel="nofollow" href="http://jensocial.com/group/ningnetworktips/forum/topics/toggle-content-with-links-1" target="_blank">working example</a>. This tip may look like a challenge, but no kidding, it is so easy. You have 3 easy steps. And the results are awesome.<br></span></strong></p>
<p><strong><span class="font-size-4"><br></span></strong></p>
<div>
<strong><span class="font-size-3">Screen Shot of Both CSS Examples:</span></strong>
</div>
<p><img src="http://storage.ning.com/topology/rest/1.0/file/get/546319?profile=original" width="667"></p>
<p> </p>
<p><span class="font-size-4"><strong>Get Creative!</strong> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546392?profile=original">ToggleContentTextBox_GetCreative.txt</a></span></p>
<p><span class="font-size-4"><img src="http://storage.ning.com/topology/rest/1.0/file/get/546342?profile=original" width="550"><br></span></p>
<p> </p>
<p><span class="font-size-4"><strong>Installation Overview:</strong></span> Edit the code for Text Box, adding as many links/content you need to add. Each DIV has an assigned class identifier for the <strong>header</strong> (toggle_head) and <strong>body</strong> 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.</p>
<p> </p>
<p><strong><span class="font-size-3">Edit Code Below, Adding Your Content. Add Finished Code to Text Box. Be sure to click on the HTML button when adding your code.</span></strong></p>
<p><span class="font-size-3"><strong><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546430?profile=original">ToggleContentTextBox.txt</a></strong></span></p>
<div>
<div class="toggle_list">
<br> <p class="toggle_head">Your Header-1</p>
<br> <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>
<br> <p class="toggle_head">Your Header-2</p>
<br> <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>
<br> <p class="toggle_head">Your Header-3</p>
<br> <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>
<br> </div>
<br>
</div>
<p><span class="font-size-4"><strong>Tip:</strong> If you want to add multiple expandable DIVs, you can force the width of each one, overriding the CSS, like this:</span><br> <span class="font-size-4"><div style="width: 600px!important;" class="toggle_list"></span></p>
<hr>
<p> </p>
<p><strong><span class="font-size-3">Edit CSS Below, and Add to Advanced CSS. See comments for changing width, background and font colors, for header and body.<br></span></strong></p>
<p><strong><span class="font-size-3"><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546458?profile=original">ToggleContentCSS.txt</a><br> CSS with Green Plus Sign Image: <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546486?profile=original">ToggleContentCSS_withplus.txt</a></span></strong></p>
<pre>
/* CSS for Toggle Content */<br>.toggle_list {<br>margin: 0px;<br>padding: 0px;<br>width: 467px; /* Width of Content Area */<br>}<br>.toggle_head {<br>padding: 5px 10px;<br>cursor: pointer;<br>position: relative;<br>background-color:#83D13D; /* Header Background Color. Remove for none. */<br>margin:1px;<br>color:#ffffff; /* Header Text Color */<br>}<br>.toggle_body {<br>padding: 5px 10px 15px;<br>background-color:#F2FFE1; /* Body Background Color. Remove for none. */<br>color:#333333; /* Body Text Color */<br>}<br>/* End CSS for Toggle Content */<br><br>
</pre>
<hr>
<p><strong><span class="font-size-3">Edit code b</span></strong><strong><span class="font-size-3">elow, and Add to your Custom Code Box.</span></strong></p>
<ul>
<li><span class="font-size-3">Change the 200 for open/close speed. 600 is good for slow open/close.</span></li>
<li><span class="font-size-3">Add to your Custom Code Box via: My Network/Tools/Custom Code</span></li>
</ul>
<p><span class="font-size-3"><br></span></p>
<p><span class="font-size-3"><strong><a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/546515?profile=original">ToggleContentCustomCodeBox_without_jscall.txt</a></strong></span></p>
<pre>
<!-- Toggle Content --><br><script type="text/javascript"><br>//hide the all of the element with class toggle_body<br>x$(".toggle_body").hide();<br>//toggle the content with class toggle_body<br>x$(".toggle_head").click(function()<br>{<br>// 200 is good for fast, and 600 for slow open<br>x$(this).next(".toggle_body").slideToggle(200);<br>});<br></script><br><!-- End Toggle Content -->
</pre>
<p> </p>
<ul>
<li><span class="font-size-3">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...</span></li>
<li><span class="font-size-3">Make sure you reload your page, immediately after text box install or edits.</span></li>
<li><span class="font-size-3">In the CSS Examples, to add a border bottom to your headers, I used this code:</span> <span class="cssPropName editable">border-bottom</span><span class="cssColon">:</span> <span class="cssPropValue editable">1px dashed #C0C0C0</span><span class="cssSemi">;</span><span class="font-size-3">Add to your ".toggle_head".</span></li>
</ul>
<p> </p>
<p><span class="font-size-3">Enjoy! If you're a Ning Network Creator, join us on JenSocial in Jen's <a rel="nofollow" href="http://jensocial.com/group/premiumningtipsbyjen" target="_self">VIP Group</a>. It's a great place to chat about all kinds of great topics, business and fun! Just ask any of our 100+ members. ;-)</span></p>
<p><span class="font-size-3"><br></span></p>
<p><span class="font-size-2"><strong><span class="font-size-3">Enjoy!</span></strong></span></p></div>