Slide Accordion: When you click on a heading, it will show the next paragraph.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide Accordion </title>
<script type="text/javascript" src="../html/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h2:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h2").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h2 {
background: #e9e7e7 ;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border:1px solid #333;
border-bottom: none;
cursor: pointer;
}
.accordion h2:hover {
background-color: #222; color:#fff
}
.accordion h2.active {
background-position: right 5px;
}
.accordion p {
background:#CCCCCC;
margin: 0;
padding: 10px 15px 20px;
border-left:1px solid #333;
border-right:1px solid #333;
}
</style>
</head>
<body>
<div class="accordion">
<center><h1>Slide Accordian</h1></center>
<h2>heading1</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading2</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading3</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading4</h2>
<p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading5</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
</body>
</html>
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide Accordion </title>
<script type="text/javascript" src="../html/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".accordion h2:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h2").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h2 {
background: #e9e7e7 ;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border:1px solid #333;
border-bottom: none;
cursor: pointer;
}
.accordion h2:hover {
background-color: #222; color:#fff
}
.accordion h2.active {
background-position: right 5px;
}
.accordion p {
background:#CCCCCC;
margin: 0;
padding: 10px 15px 20px;
border-left:1px solid #333;
border-right:1px solid #333;
}
</style>
</head>
<body>
<div class="accordion">
<center><h1>Slide Accordian</h1></center>
<h2>heading1</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading2</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading3</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading4</h2>
<p>Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h2>heading5</h2>
<p> Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>
</body>
</html>
No comments:
Post a Comment