tips,tricks and hacks: Hide/Show, Expand/Collapse

I am excited...again. It all goes back to my sidebar and drop down menu issues. My sidebar must be organized, tidy, make sense, easy to navigate, pleasing to look at and serve a purpose. For other issues concerning my sidebar, I used these methods that are explained in these posts A drop-down menu alternative and Blogger 'Previous Posts' & 'Archives' Drop Down Menu. Each method worked for a different type of navigation problem.

I used the hide/show element not so much for navigation,

Hide/Show Element"The hide/show element allows a portion of the page contents to toggle between hidden or shown. There are multiple valid locations where hide/show can be used.
from www.oracle.com

but to make my sidebar organized and pleasing to look at. Once again I found help at the Blogger Forum. This time CptCanuck came to the rescue. I knew what I wanted...I just didn't know how to accomplish it. I wanted a way to put image links in a drop down menu. CptCanuck offered the hide/show solution which is so much better for this.

Here are the steps involved. It has three parts. First you must enter the following code in your style sheet:

.commenthidden {display:none}
.commentshown {display:inline}

Second put this between the <head> and </head> tags, but not in the style sheet:

<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 put this in your sidebar where you want it to appear:

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Title</a><br />
<div class="commenthidden" id="UniqueName"
></div>

This is what my code looks like:

<a aiotitle="click to expand" href="javascript:togglecomments('chickletlist')">I love Chicklets...+/-</a><br /><br>
<div class="commenthidden" id="chickletlist">
<a title="Blogger Forum, the Blogging community" target="_blank" href="http://www.bloggerforum.com/">
<img border="0" src="http://www.bloggerforum.com/images/bf5.gif" width="80" height="15"></a>
</div>

The UniqueName had me puzzled but CptCanuck explained that it had to be a name that was 'unique' from any other in my template. So, I called it chickletlist. Next give it a title. I chose I love Chicklets...+/-. The actual link is placed between the <div></div> elements. You may add links until you feel the need to move on.

Edit 5/24/06: Today I saw a post over at Freshblog that discusses the Hide/Show hack. Somehow by reading different links, I ended up at Singpolyma - Technical Blog and saw an awesome example of using Hide/Show for the whole sidebar!

Also see: Blogger Beta: Hide/Show, Expand/Collapse Labels

post signature

tips,tricks and hacks

Saturday, 20 May 2006

Hide/Show, Expand/Collapse - navigation element

No comments:

Post a Comment