Jquery Accordion
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Jquery Accordion</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
position:relative;
z-index:0;
background:#ccc;
}
.main {
width: 100%;
margin: 0px auto;
}
.page-title {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #e2e2e2;
text-align: center;
}
.site-header-wrap {
margin-bottom:60px;
border-bottom:1px solid #cd9ad6;
}
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
border-radius:3px;
padding:20px;
}
.accordion-section-title {
width:100%;
padding:8px 10px;
display:inline-block;
transition:all linear 0.15s;
font-size:14px;
color:#fff;
background: url(images/plus.png) no-repeat 10px 8px;
padding-left: 35px;
text-decoration: none;
background-color:#00b288;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration:none;
background: url(images/minus.png) no-repeat 10px 8px;
padding-left: 35px;
text-decoration: none;
border-bottom-left-radius: 1em;
background-color:#4c5870;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
.accordion-section-content {
padding:10px 15px;
display:none;
background: #fff;
}
.accordion-section-content p {
margin:0px 0px 10px;
}
.accordion .accordion-section + .accordion-section {
margin-top: 5px;
}
Jquery Script:
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Icons:
Use these icons
<!DOCTYPE html>
<html>
<head>
<title>Jquery Accordion</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
position:relative;
z-index:0;
background:#ccc;
}
.main {
width: 100%;
margin: 0px auto;
}
.page-title {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #e2e2e2;
text-align: center;
}
.site-header-wrap {
margin-bottom:60px;
border-bottom:1px solid #cd9ad6;
}
.accordion, .accordion * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.accordion {
overflow:hidden;
border-radius:3px;
padding:20px;
}
.accordion-section-title {
width:100%;
padding:8px 10px;
display:inline-block;
transition:all linear 0.15s;
font-size:14px;
color:#fff;
background: url(images/plus.png) no-repeat 10px 8px;
padding-left: 35px;
text-decoration: none;
background-color:#00b288;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration:none;
background: url(images/minus.png) no-repeat 10px 8px;
padding-left: 35px;
text-decoration: none;
border-bottom-left-radius: 1em;
background-color:#4c5870;
}
.accordion-section:last-child .accordion-section-title {
border-bottom:none;
}
.accordion-section-content {
padding:10px 15px;
display:none;
background: #fff;
}
.accordion-section-content p {
margin:0px 0px 10px;
}
.accordion .accordion-section + .accordion-section {
margin-top: 5px;
}
Jquery Script:
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery('.accordion .accordion-section-title').removeClass('active');
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
jQuery('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr('href');
if(jQuery(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
jQuery(this).addClass('active');
// Open up the hidden content panel
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Icons:
Use these icons
Comments
Post a Comment