I believe you may have encounter this before - having too many things in the sidebar, and thus making it too long and annoying. Or want to add things in the sidebar but its already exceed the main page height limit which will not look good.

In here hopefully, you'll get a solution. Thanks to jQuery now this wont be any trouble anymore. Enjoy the view*. (*totally unrelated)

This is a tutorial of how to make a simple and fun Sidebar Toggle Slide.

Demo :

Listings


So let us start step by step:-

1. Now, i supposed this is your sidebar title - 'Listings'.

2. Go to Design ► Edit HTML and check 'Expand Widget Templates'. Remember to backup your template first.

3. Ctrl + F and find </head>. Place the code below before </head>

<!-- slide toggle -->
<script language='JavaScript' src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='JavaScript' src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){   
    $('.toggle_listings').click(function(){
        $('.listings_content').slideToggle(600);
        return false;
    });
});   
</script>
<!-- /slide toggle -->

For quick notes:

.toggle_listings = is a class for the title 'Listings'
.listings_content = is a content class of the corresponding title 'Listings'
600 =  indicate that the durations of the sliding is in 600 milliseconds,

4. In the Edit HTML, Ctrl + F and find 'Listings' which is likely will look like this:-

<b:widget id='HTML4' locked='false' title='Listings' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Quick notes :-

Listings = is a title
<h2 class='title'><data:title/></h2> = is a class for the title
<data:title/> = Listings = title
<div class='widget-content'> = is a class for the content
<data:content/> = is a content
5. Now, change the following:-
class='title' to class='toggle_listings'
class='widget-content' to class='listings_content'

It'll mostly look like this:-

<b:widget id='HTML4' locked='false' title='Listings' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='toggle_listings'><a href='#'><data:title/></a></h2>
  </b:if>
  <div class='listings_content'>
    <data:content/>
  </div>

To make it look more cool, make <data:title/> as a link,

<a href='#'><data:title/></a>

6. Lastly a little bit for CSS; Ctrl + F </style> and place the CSS below before it.

.listings_content { display:none; }

This is, if you want to hide the content as default. If not then it is not necessary. You can edit the CSS as you please, for example making a hover effect etc.

Additional reminder : If you want to apply this on many items in the sidebar, just repeat the steps but in Step 3 you'll need to add something.

  <script type='text/javascript'>
$(document).ready(function(){ 
    $('.toggle_listings').click(function(){
        $('.lisitngs_content').slideToggle(600);
        return false;
    });
    $('.thetitleclass').click(function(){
        $('.thecontentclass').slideToggle(600);
        return false;
    });
}); 
</script>

And remember, the class name must be unique.

Happy blogging..



You may also like this [...]
Fellow Readers