Header Ads

Header ADS

How to make vertical accordion using jquery

How to make vertical accordion using jquery
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("slow");
  });
});
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#panel2").slideToggle("slow");
  });
});
</script>

<style type="text/css">

#panel1,#flip1,#panel2,#flip2,#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel1,#panel2,#panel
{
padding:50px;
display:none;
}

</style>
</head>
<body>

<div id="flip">CSS & Java Script</div>
<div id="panel">Attendance:   assessment</div>

<div id="flip1">C# , C++ , PHP </div>
<div id="panel1">Student

  position.</div>

<div id="flip2">Be Happy</div>
<div id="panel2">Hello world!</div>

</body>
</html>

Screen Shot:
How to make simple jquery accordion vertical

No comments

Powered by Blogger.