Free Elegant Accordion Menu For Blogger

NEW! Now with a better and nicer look.

So for today we will be sharing our own Elegant CSS Accordion Menu design only for Blogger. This accordion is pretty helpful of course when we have a very long sidebar menu like for example is the Popular Posts which shows the top 10 posts from our blog, we cannot deny that it somehow consumes or needs a huge space in our blog.
So basically we want to create a section where we can add gadgets afterwards. You can follow these simple steps to add this Free Elegant CSS Accordion Menu.

Step:

• 1
• 2
• 3

Step 1 : Navigating (?)
    Go to Blogger
    Template
    Backup your Template
    Press Edit HTML

Step 2 : Adding the Code
    Find (ctrl+f) </body>
    Copy the following code and paste it before </body>

<script type='text/javascript'>
$(function() {
$(&#39;.MBAaccordion .widget-content&#39;).hide();
$(&#39;.MBAaccordion h2:first&#39;).addClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
$(&#39;.MBAaccordion h2&#39;).click(function() {
if($(this).next().is(&#39;:hidden&#39;)) {
$(&#39;.MBAaccordion h2&#39;).removeClass(&#39;active&#39;).next().slideUp(&#39;slow&#39;);
$(this).toggleClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
}
});
});
</script>

    Find (ctrl+f) ]]></b:skin>
    Copy the following code and paste it before ]]></b:skin>

/*--------------- MBA Accordion Menu ---------------*/
.MBAaccordion {
margin-bottom: 20px;
}
.MBAaccordion .widget-content ul {
margin: 0;
}
.MBAaccordion .widget-content ul li {
list-style:none;
}
.MBAaccordion h2 {
padding: 20px 20px;
background:#00aa9f;
color:#fff;
font-size:14px;
font-weight: normal;
display: block;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.MBAaccordion h2.title {
background: #00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2xFJGaohWxoZdFxj4wmGWn3XD0LhYvq94fKFJvQp20_bv5zaSFGgF-3Ey-qLpdsWtcKM3iqhIgXy_VWbQWNbUrwLqV_eXEYSRi4o3Zo5rP6AFJrpwCy602AwH1po-YtpOYivUL-aJxV6/s20/Leader_Avatar-128.png) no-repeat 95% 50%;
}
.MBAaccordion h2.title:hover, .MBAaccordion h2.title.active {
background: #008d84 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2xFJGaohWxoZdFxj4wmGWn3XD0LhYvq94fKFJvQp20_bv5zaSFGgF-3Ey-qLpdsWtcKM3iqhIgXy_VWbQWNbUrwLqV_eXEYSRi4o3Zo5rP6AFJrpwCy602AwH1po-YtpOYivUL-aJxV6/s20/Leader_Avatar-128.png) no-repeat 95% 50%;
-moz-box-shadow:    inset 0 5px 3px #007d75;
-webkit-box-shadow: inset 0 5px 3px #007d75;
box-shadow:         inset 0 5px 3px #007d75;
text-shadow:1px 1px 1px #00544f;
}
.MBAaccordion h2.popular {
background: #00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sDs_iGngT1Ezlztvmu3CIDPjTyPGFBMCP2n0IEHDbILRFIAo-n5Ey6iwcd6UCzzLar5sfM0isF5gvrMy9x49WJQ1j_lbpoXm13Ji7hYaozEUnE3uMKX5KG_BTLZM6aaBrcdNi38N2kgL/s20/popular.png) no-repeat 95% 50%;
}
.MBAaccordion h2.popular:hover, .MBAaccordion h2.popular.active {
background: #008d84 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0sDs_iGngT1Ezlztvmu3CIDPjTyPGFBMCP2n0IEHDbILRFIAo-n5Ey6iwcd6UCzzLar5sfM0isF5gvrMy9x49WJQ1j_lbpoXm13Ji7hYaozEUnE3uMKX5KG_BTLZM6aaBrcdNi38N2kgL/s20/popular.png) no-repeat 95% 50%;
-moz-box-shadow:    inset 0 5px 3px #007d75;
-webkit-box-shadow: inset 0 5px 3px #007d75;
box-shadow:         inset 0 5px 3px #007d75;
text-shadow:1px 1px 1px #00544f;
}
.MBAaccordion h2.subscribe {
background: #00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtal9OW0mcmTxySDc49rYz8OyLp8IVwcDb80lpzPccXml-1srLSe9C9iEFOef3wBAqMB9VXs9PiqMnHARjV56HArW8Cd31ZBOEx54VcRdsarfPMeBeKL010LnejnTOaJjXwlUT8TX9Oqv/s20/mail.png) no-repeat 95% 50%;
}
.MBAaccordion h2.subscribe:hover, .MBAaccordion h2.subscribe.active {
background: #008d84 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVtal9OW0mcmTxySDc49rYz8OyLp8IVwcDb80lpzPccXml-1srLSe9C9iEFOef3wBAqMB9VXs9PiqMnHARjV56HArW8Cd31ZBOEx54VcRdsarfPMeBeKL010LnejnTOaJjXwlUT8TX9Oqv/s20/mail.png) no-repeat 95% 50%;
-moz-box-shadow:    inset 0 5px 3px #007d75;
-webkit-box-shadow: inset 0 5px 3px #007d75;
box-shadow:         inset 0 5px 3px #007d75;
text-shadow:1px 1px 1px #00544f;
}
.MBAaccordion h2.tags {
background: #00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZXNtAqCRc1RF4KoFhx0XU1Q5qde19jwaCgsHcwWcdcWwnBxonFpreIFgt1BnHGnP57eCRorHUXiUu4MexOymK-pBsx_xoDLzGgO2GUharPtsNsD6Nj27ZVmT-cxM9ilwj2a1C6V2EoET/s20/tags.png) no-repeat 95% 50%;
}
.MBAaccordion h2.tags:hover, .MBAaccordion h2.tags.active {
background: #008d84 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZXNtAqCRc1RF4KoFhx0XU1Q5qde19jwaCgsHcwWcdcWwnBxonFpreIFgt1BnHGnP57eCRorHUXiUu4MexOymK-pBsx_xoDLzGgO2GUharPtsNsD6Nj27ZVmT-cxM9ilwj2a1C6V2EoET/s20/tags.png) no-repeat 95% 50%;
text-shadow:1px 1px 1px #00544f;
}

    Find (ctrl+f) <div class='sidebar-wrapper'>
    Copy the following code and paste it before <div class='sidebar-wrapper'>

<b:section class='MBAaccordion' id='MBAaccordion' showaddelement='yes'>
    </b:section>     

    Go to Layout
    Then add a Gadget on the section that we have created. (Next to your Sidebar Section)

Step 3 : Saving
    Save your Template

Customization
    Change #00aa9f with your desired background color.
    Change #008d84 with your desired background hover color; and
    Change #00544f with your desired text shadow color.

Note :
    You might not see <div class='sidebar-wrapper'> in your template, so try to look for any similar code.

Let me know if you're facing any problems installing this widget. Enjoy blogging!

Rate This Article

Thanks for reading: Free Elegant Accordion Menu For Blogger, Stay tune to get latest Blogging Tips.