Expand or Collapse ( +/- ) Siderbar LinkList Title –> Script, Widget


In this post i will explain how to implement “Expandible or collapsible” sidebar title.This applies only to the sidebar title with linklist that you have made. You can see this hack at right side of my blog. When you click on those titles, the widget will get expanded.

+/- Get Code for Expand/Collapse Sidebar Link

How to Implement :

1. Login to Blogger Dashboard

2. Go to Layout >> Edit HTML ( Backup your template first )

3. Without Expanding your template search for the code ]]></b:skin>

4. Copy and Paste the following CSS code right above the searched code ( or paste in CSS Section ).

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

5. Put the following code 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>

6. Place the following code between any of your section ( Without expanding ). For that search for sidebar sections <b:section>

<b:widget id=’LinkListXX‘ locked=’false’ title=’+/- YOUR TITLE‘ type=’LinkList’>
<b:includable id=’main’>
<script type=’text/javascript’>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<script type=’text/javascript’>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<ul>
<b:loop values=’data:links’ var=’link’>
<li><a expr:href=’data:link.target’><data:link.name/></a></li>
</b:loop>
</ul>
<script type=’text/javascript’>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

7. Replace XX with unique number ( may be 1, 2, 3, .. it should be unique ) and +/- YOUR TITLE with title of the sidebar widget.

8. Preview and save your template

If you like this post, don’t forget to subscribe to RSS feed or Email.

Featured Items - Start Your Own Community Website Like Facebook In a Minute

Want to start your own social or community website like Facebook ? Start right away using Buddypress WordPress plugin along with premium Buddypress Themes. No need to setup anything. It works out of box. Install BuddyPress plugin and Premium themes from this list. Your are done!.
FIND OUT MORE

Featured Items - Top 10 Website Hosting Provider 2012

Want to host your website in one of the top rated Web Hosting company ? Ratings are collected from the user all over the world and given a ranking based on the user feedback. All Plan includes: Free domain, Unlimited Space, Bandwidth, unlimited sites, free marketing credits and which also includes attractive discount.
FIND OUT MORE

Featured Items - Top Selling WordPress Themes From Themeforest

Want to use one of the most selling WordPress themes for your next project?   Here is the list of items which have been sold more number of times from Blog, Magazine, Creative, Retail, Technology, Entertainment, BuddyPress, eCommerce and Nonprofit categories.
FIND OUT MORE

Related posts:

  1. Expand or Collapse ( +/- ) Post Link –> Script, Widget
  2. Language Translation Widget (Flags) to Your Blog
  3. Add Image Icon Before or After Post Title
  4. Search Box for Blogger Blog
  5. Show Date Before Each Post Title In Blogger