Monday 30 November 2009

Expand/Collapse ,Hide/show -navigation Element-widget

Here is a simple tutorial for you to add Expand/collapse ,Hide/show navigation element which gives pleasing and organized look to your sidebar.Actually the whole tutorial is divided in to three parts and every part is equally important .Any mistake might not result what is expected.
Before starting The tutorials please backup your template in case if anything goes wrong.
First part :
Add the following code in your style sheet.
.commenthidden {display:none}
.commentshown {display:inline}
Second part :
Put the following code in Between <head> and </head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
&lt;head&gt;
Third Part :
Add this code in your Html/javascript gadget.
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Title</a><br />
<div class="commenthidden" id="UniqueName"
>Include your all content here</div>
Replace UniqueName
with any unique string in both places and Title
with the title of your gadget.

For instance include your content before last </div> element
<a aiotitle="click to expand" href="javascript:togglecomments('chickletlist000')"> /- Useful Links-click me to expand</a><br/><br/>
<div id="chickletlist000" class="commenthidden">
<ul id="main-nav">
 <li><a href="http://www.bannercreator.nu/banner-maker.html">Banner Creater</a></li>
 <li><a href="http://www.chicklette.net/chicklet-maker/">Chicknet Maker</a></li>
 <li><a href="http://www.degraeve.com/color-palette/index.php">Color pallate Generator</a></li>
 <li><a href="http://www.degraeve.com/reference/color.php">color picker</a></li>
 <li><a href="http://www.chami.com/html-kit/services/favicon/">favicon from pics</a></li>
 <li><a href="http://www.vizu.com/index.htm">make polls</a></li>
</ul>

</div>

No comments:

Post a Comment