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>
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>


1 comment:

  1. I would like to ask on how to put the widget only at html/javascript gadget without altering the layout via edit html tab..

    thank you :)


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,