I have created a custom jquery accordion and I am stuck with the code, when I click on accordion title, its opening both of the accordion where it should open the one where I have clicked, following are the codes:
$(document).ready(function() { $(".acc-wrap > .acc-head").on("click", function() { if ($(this).hasClass('active')) { $(this).removeClass("active"); $(this).siblings('.acc-body').slideUp(200); $(".acc-wrap > .acc-head").attr('class', 'acc-head opened'); } else { $(".acc-wrap > .acc-head").attr('class', 'acc-head closed'); $(this).addClass("active"); $('.acc-body').slideUp(200); $(this).siblings('.acc-body').slideDown(200); } }); });
.projects-list { max-width: 600px; margin: 0 auto; background: #E0E0E0; padding: 15px 0; font-family: Roboto; } body { margin: 0; padding: 0; } .acc-wrap { position: relative; width: 100%; } .acc-wrap > .acc-head { float: left; width: 100%; display: block; background-color: #264796; padding: 10px; color: #fff; font-weight: 600; border-bottom: 1px solid #ddd; transition: all 0.2s linear; position: relative; } .acc-wrap > .acc-head.opened { position: relative; } .acc-wrap > .acc-head.opened:after { content: "\\f055"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-wrap > .acc-head.closed { position: relative; } .acc-wrap > .acc-head.closed:after { content: "\\f056"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-body { position: relative; width: 100%; float: left; background-color: #fff; padding: 10px; border-bottom: 1px solid #ddd; display: none; box-sizing: border-box; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <div class="projects-list"> <div class="acc-wrap"> <div class="acc-head opened"> Vestibulum </div> <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div> <div class="acc-head"> Vestibulum 2</div> <div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div> </div> </div>
I think you should use the next-function instead of the siblings-function:
<style> .projects-list { max-width: 600px; margin: 0 auto; background: #E0E0E0; padding: 15px 0; font-family: Roboto; } body { margin: 0; padding: 0; } .acc-wrap { position: relative; width: 100%; } .acc-wrap > .acc-head { float: left; width: 100%; display: block; background-color: #264796; padding: 10px; color: #fff; font-weight: 600; border-bottom: 1px solid #ddd; transition: all 0.2s linear; position: relative; } .acc-wrap > .acc-head.opened { position: relative; } .acc-wrap > .acc-head.opened:after { content: "\\f055"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-wrap > .acc-head.closed { position: relative; } .acc-wrap > .acc-head.closed:after { content: "\\f056"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-body { position: relative; width: 100%; float: left; background-color: #fff; padding: 10px; border-bottom: 1px solid #ddd; display: none; box-sizing: border-box; } </style>
`
You can try something like this:
$(this)
// Add/ Remove active and opened as both will always be together.
.toggleClass('active opened')
// Add closed if active not present else remove it
.toggleClass('closed', !$this.hasClass('active'))
// Go to next element
.next()
// Toggle slide on every click
.slideToggle(200)
Also note that $(".acc-wrap > .acc-head");
is pointing to all accordion headers. You should always try to use this
and navigate to necessary div.
$(document).ready(function() { $(".acc-wrap > .acc-head").on("click", function() { var $this = $(this) $this .toggleClass('active opened') .toggleClass('closed', !$this.hasClass('active')) .next() .slideToggle(200) }); });
.projects-list { max-width: 600px; margin: 0 auto; background: #E0E0E0; padding: 15px 0; font-family: Roboto; } body { margin: 0; padding: 0; } .acc-wrap { position: relative; width: 100%; } .acc-wrap > .acc-head { float: left; width: 100%; display: block; background-color: #264796; padding: 10px; color: #fff; font-weight: 600; border-bottom: 1px solid #ddd; transition: all 0.2s linear; position: relative; } .acc-wrap > .acc-head.opened { position: relative; } .acc-wrap > .acc-head.opened:after { content: "\\f055"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-wrap > .acc-head.closed { position: relative; } .acc-wrap > .acc-head.closed:after { content: "\\f056"; font-family: fontAwesome; position: absolute; right: 15px; } .acc-body { position: relative; width: 100%; float: left; background-color: #fff; padding: 10px; border-bottom: 1px solid #ddd; display: none; box-sizing: border-box; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <div class="projects-list"> <div class="acc-wrap"> <div class="acc-head">Vestibulum</div> <div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div> <div class="acc-head">Vestibulum 2</div> <div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div> </div> </div>
$(".acc-wrap > .acc-head:not(.opened)");
Instead of using referencing the elements by class you want to use "this".find("element").attr() etc etc. You are targeting all elements matching the class .acc-head when using this $(".acc-wrap > .acc-head");
Alternatively you could reference the targeted element using $(".acc-wrap > .acc-head.active");
<div style="max-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6dec" >Vestibulum
<span id="plus"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span> </a>
</h4>
</div>
<div id="collapse6dec" class="panel-collapse collapse">
<div class="panel-body" style="">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top:-20px">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab1">
<a data-toggle="collapse" data-parent="#accordion" href="#lorem2" >Vestibulum 2 <span id="plus1"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus1" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="lorem2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var counter = -1;
$("#ab").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus").css('display','none');
$("#minus").css('display','inline');
}
else{
$("#plus").css('display','inline');
$("#minus").css('display','none');
}
});
$("#ab1").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus1").css('display','none');
$("#minus1").css('display','inline');
}
else{
$("#plus1").css('display','inline');
$("#minus1").css('display','none');
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.