Making Accordion Menu Without Edit HTML

This time I will give a tutorial to make accordion menu that I put on the template Johny Simple Magazine 2 and Johny Magazine 2 without having to go into Edit HTML. Initially both the template using simple accordion from dezinerfolio, lately not work. As of now I do not know why, but all I've javascriptnya replace it with a new one. Finally I found a simple accordion menu, no need to go into Edit HTML, just go to the layout and select the HTML / Javascript, put the code there .... ready-made menu accordionnya.

One of the functions of the accordion menu in addition to simplify the look of the blog, can also beautify your blog, as well as the function of the tabber or tab view, so your blog will look more compact and neat. This tutorial is a bit long, I just update the display menu only. You can put this on the sidebar accordion menu blog. For my friends who want to try, here's how to make it (oh yeah really old school language):

1.Log in to your Blogger account
2.Go to Layout, select HTML / Javascript
3.Then enter the following code into it (kek make cooking only):



<style type="text/css">

#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2VVAmetiL-tByPr_wcJxY_OyxbfmPmqqCCFLzcx6h_85VXRFhIGWwMSIfAEPO8r9mRBKAudVMCX982-mOA4OzxJA5DozWUs2ysp7JZJJbRwAfT4OtObaECx0TuB1rYsjIk2Z7VEyp0ec/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzldEiBHh5lM9IH9BWXeckUdQ6G57Zi0VUboKjZeMCHtNcCO5O8Sev9fwQDwm52vRD9gDjrWQCFZ5UBgc8Y9aGNORPqY0Rghh0GNmzm0Czw_wqEmhs9MZEZslWp0KAR3En-GAj6kTuvw/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

4.Last Save, see the results

Accordion Menu Light Demo

Description:
1.Title: The title heading accordion menu
2.The content: Please you fill with widgets that will be installed (you can script, script and script widget ad)
Accordion menu above for a blog that has a bright color background. For those of you who have a blog or a dark black color, just change its css code,. More details as the code below:


<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-qL1gRsw74UFuwjrULxXgvjORn8NkRCdhA2WA3EKR0ywelkgMSytHajyb1kupDyd1f3S9cyLZT7aiLfuD9e4TXqKJibuMvxy07YiH9TpbVJD6JZlg7GjfYRgxLsQUTA-zow9yyxKBhg/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjla-XadrC2pUHTStLKtuUqgCf7-UvLgpYqj7b_7Y4HQfNA7x8D1zbmUAUVhKUUb5WK3ufrxp7Bl3TsxsgoKU6vkGsxyRZM6swQnLX-5hj2RJXSb11yHYSYol6U5byX1gd8D5zgbsZDm-4/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

Demo Accordion Menu Dark

Sources of information:  http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html