Hello friends. Here is a very simple accordion menu script. You can add more menus in this list. Just copy and paste this code into your html page.
Html and Css
The JavascriptHtml and Css
<!doctype html>
<html>
<head>
<title>Simple Accordion Menu</title>
<style type="text/css">
* {
outline: none;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
.accordion {
margin: 0px auto;
padding: 0px;
width: 220px;
outline: none;
}
.accordion_head {
margin: 0px;
padding: 3px;
background-color: #eae7e2;
border: 1px #cccccc solid;
}
.accordion_head a {
font-size: 14px;
color: #000000;
font-weight: bold;
padding-left: 10px;
text-decoration: none;
}
.accordion_content {
display: none;
font-size: 12px;
margin: 0px auto;
padding: 0px;
width: 218px;
background-color: #f7f4ef;
border: 1px #cccccc solid;
}
.accordion_content p {
padding: 10px;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion_head">
<a href="javascript:;">Heading 1</a></div>
<div class="accordion_content">
<p>1 1 1 1 1 1 1 1 1 1</p>
</div>
<div class="accordion_head">
<a href="javascript:;">Heading 2</a></div>
<div class="accordion_content">
<p>2 2 2 2 2 2 2 2 2 2</p>
</div>
<div class="accordion_head">
<a href="javascript:;">Heading 3</a></div>
<div class="accordion_content">
<p>3 3 3 3 3 3 3 3 3 3</p>
</div>
<div class="accordion_head">
<a href="javascript:;">Heading 4</a></div>
<div class="accordion_content">
<p>4 4 4 4 4 4 4 4 4 4</p>
</div>
<div class="accordion_head">
<a href="javascript:;">Heading 5</a></div>
<div class="accordion_content">
<p>5 5 5 5 5 5 5 5 5 5</p>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('.accordion div.accordion_head').click(function(){
$(this).next('div.accordion_content').slideToggle(400).siblings("div.accordion_content").slideUp('slow');
});
</script>
The Example Demo
Posting Komentar