A very simple accordion menu
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
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
<!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>
12345678910
<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
A very simple accordion menu
![A very simple accordion menu]()
Reviewed by JS Pixels
on
October 07, 2011
Rating:
No comments: