collapsible blogrolls

So, you want some cute collapsible blogrolls, but you also don't like Flooble's ad-infested free ones. Here is what you want to do, with a big hat tip to Purple Moggy.

1. Back up your template.

2. Put this in the HEAD part of your template, in the style section, if you keep your template organized that way.
/*******************************************/<br />/* Switch Menu */<br />/*******************************************/<br /><br /><style type="'text/css'"><br /><br />.menutitle{<br /> font-size: 1em;<br /> color: $linkcolor;<br /> margin-bottom: 3px;<br /> width:100%;<br /> padding:2px;<br /> text-align: left;<br /> border: 1px none rgb(0, 0, 0); <br /> padding: 0px;"}<br /><br />.undermenutitle{<br /> font-size: .9em;<br /> margin-bottom: 3px;<br /> width:100%;<br /> padding:2px;<br /> text-align: center;<br /> border: 1px none rgb(0, 0, 0); <br /> padding: 0px;"}<br /><br />.submenu{<br /> margin-bottom: 0.1em;<br /> font-size: .75em;}<br /><br />#menutitle a:hover{<br /> text-decoration:underline;}<br /><br />#undermenutitle a:hover{<br /> text-decoration:underline;}</style><br />
You can alter the colors etc. to fit your own blog. You'll probably also want to replace all the annoying html br marks and replace them with real breaks. When I put stuff into the text boxes I lose control of the break marks.

3. Put this also in the HEAD section, in the scripts section, if you organize that way. Otherwise you can just put Steps 2 and 3 in the same place.
<script type="'text/javascript'"><br /><br />/***********************************************<br />* Switch Menu script- by Martial B of http://getElementById.com/<br />* Modified by Dynamic Drive for format & NS4/IE4 compatibility<br />* Visit http://www.dynamicdrive.com/ for full source code<br />***********************************************/<br /><br />var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)<br />var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only<br /><br />if (document.getElementById){ //DynamicDrive.com change<br />document.write('<style type="text/css">\n')<br />document.write('.submenu{display: none;}\n')<br />document.write('</style>\n')}<br /><br />function SwitchMenu(obj){ if(document.getElementById){<br /> var el = document.getElementById(obj);<br /> var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change<br /> if(el.style.display != "block"){ //DynamicDrive.com change<br /> for (var i=0; i<ar.length; classname="=" display = "none" display = "block" display = "none" search =" Name" returnvalue = ""> 0) {<br />offset = document.cookie.indexOf(search)<br />if (offset != -1) { <br />offset += search.length<br />end = document.cookie.indexOf(";", offset);<br />if (end == -1) end = document.cookie.length;<br />returnvalue=unescape(document.cookie.substring(offset, end))}}<br />return returnvalue;}<br /><br />function onloadfunction(){<br />if (persistmenu=="yes"){<br />var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname<br />var cookievalue=get_cookie(cookiename)<br />if (cookievalue!="")<br />document.getElementById(cookievalue).style.display="block"}}<br /><br />function savemenustate(){var inc=1, blockid=""<br />while (document.getElementById("sub"+inc)){<br />if (document.getElementById("sub"+inc).style.display=="block"){<br />blockid="sub"+inc<br />break}<br />inc++}<br />var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname<br />var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid<br />document.cookie=cookiename+"="+cookievalue}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", onloadfunction, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", onloadfunction)<br />else if (document.getElementById)<br />window.onload=onloadfunction<br /><br />if (persistmenu=="yes" && document.getElementById)<br />window.onunload=savemenustate<br />//]]><br /></script><br /><!-- ********************************************end switch menu script -->
Same advice about the break marks.


4. Put this part in your sidebar, then modify it per the directions embedded within.
<br /><div class=" menutitle=" onclick="SwitchMenu('sub1')">+/- PUT YOUR BLOGROLL NAME HERE</div><span id="sub1" class="submenu">'">IF YOU WANT AN IMAGE PUT IT HERE<script language="javascript" src="PUT YOUR BLOGROLL URL HERE"></script></span><br /><div class="menutitle" onclick="SwitchMenu('sub2')">+/- PUT YOUR NEXT BLOGROLL NAME HERE</div><span id="sub2" class="submenu"><script language="javascript" src="PUT YOUR NEXT BLOGROLL URL HERE"><br /></script></span>
You can duplicate the structure as many times as you want.

Let me know how this works for you.