Accordion Menu with Jquery for Blogspot

Accordion Menu is also a common menu format is used extensively in the current website. When combined with jquery help save space on the blog, today I will guide you to the Accordion Menu use with Blogspot.

Basically, Accordion Menu on the principle of operation is: show the first content and the content remains hidden. When users interact with the content the next, it appears that section and the previous one will be hidden.

View Demo: Accordion Menu

1. Go To Blogger ---> Backup your templates.
2. Go To Design ---> Choose HTML/JavaScript Widget.
3. Paste the following code inside it.

<div id="wrapper"><dl><dt><a class="active" href="www.wikiblogger.org">Home</a></dt><dd>
<ul>
    <li><a href="#">About me</a></li>
    <li><a href="#">Contact me</a></li>
    <li><a href="#">Blogroll</a></li>
    <li><a href="#">Site map</a></li>
</ul>
</dd><dt><a href="#">Web-design</a></dt><dd>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">xHTML</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">Jquery</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">ASP.net</a></li>
    <li><a href="#">Services</a></li>
</ul>
</dd><dt><a href="#">Computer</a></dt><dd>
<ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Computer Network</a></li>
    <li><a href="#">Tips</a></li>
    <li><a href="#">Reviews</a></li>
</ul>
</dd><dt><a href="#">Links & Resources</a></dt><dd>
<ul>
    <li><a href="#">Graphic</a></li>
    <li><a href="#">Icon</a></li>
    <li><a href="#">Font</a></li>
    <li><a href="#">Webdesign tuts</a></li>
</ul>
</dd><dt><a href="#">Freebies</a></dt><dd>
<ul>
    <li><a href="#">Domain</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Themes</a></li>
    <li><a href="#">License</a></li>
</ul>
</dd></dl></div>

4. Go To Edit HTML ---> Search for this: ]]>
5. Just above it paste this code:

{ margin: 0; padding: 0;}
        body {
            font-family: arial, Georgia, sans-serif;
            font-size: 12px;
        }
        #wrapper {
            width: 500px;
            margin: 20px auto;
        }
        dl  {
            width: 250px;
        }
        dt{
            background: #a2c4c9;
            border-bottom: 1px solid white;
            font-size: 14px;
            padding: 5px 0px;
        }
        dt a {
            color: white;
            text-decoration: none;
            padding: 0px 18px;
        }
        dd a {
            color: black;
        }
        ul {
            list-style: none; padding: 5px;

6. Search for this: and just above it paste this code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
</script> 
<script type="text/javascript">
        $(document).ready(function() {
            $('dd:not(:first)').hide();
            $('dt a').click(function()  {
                $('dd:visible').slideUp('slow');
                $(this).parent().next().slideDown('slow');
                return false;
            });
        });   
</script> 

I wish you success.