Create a jquery simple accordion
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a jquery simple accordion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container').hide();
$('.accordiontrigger:first').addClass('active').next().show(); //"active" class to first trigger, when click show next container
$('.accordiontrigger').click(function(){ //On Click
if( $(this).next().is(':hidden') ) { //next container is closed
$('.accordiontrigger').removeClass('active').next().slideUp(); //Remove all .accordiontrigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .accordiontrigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
</head>
<body>
<div class="wrapper">
<h2 class="accordiontrigger"><a href="">Praesent duis vel similis usitas</a></h2>
<div class="container">
<div class="block">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
<h2 class="accordiontrigger"><a href="">hos olim odio olim indoles</a></h2>`
<div class="container">
<div class="block">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
<h2 class="accordiontrigger"><a href="">Euismod, v blandit, jumentum</a></h2>
<div class="container">
<div class="block">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, v blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
</div>
</div>
</div>
<style>
body {
font: 10px normal Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
line-height: 1.7em;
}
*, * focus {
outline: none;
margin: 0;
padding: 0;
}
.wrapper {
width: 500px;
margin: 0 auto;margin-top:50px;
}
h2.accordiontrigger {
padding: 0; margin: 0 0 5px 0;
background: url(img/01.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.accordiontrigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.accordiontrigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.container .block {
padding: 20px;
}
.container .block p {
padding: 5px 0;
margin: 5px 0;
}
.container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ccc;
}
.container img {
float: left;
margin: 10px 15px 15px 0;
padding: 5px;
background: #ddd;
border: 1px solid #ccc;
}
</style>
</body>
</html>
VIDEO
Create a jquery simple accordion
