JQuery section of accordion bounces back when I close it
I have three accordion sections and I want the first one to be open (with the other two closed) when I first visit the page. I gave all three (ie "accordionSectionContent" as shown below) separate ids (on top of their generic "accordionSectionContent" class) and for the first one I said:
#accordion1 {
display:block;
}
Everything is fine except when I click on its title at the beginning (although it is already open), it closes and then bounces back again. If I click on it again, it doesn't bounce again, but closes. The problem should be in the following code (please modify and train):
Relevant CSS:
.accordionSectionContent {
display:none;
}
.accordionSectionTitle {
width:100%;
display:inline-block;
transition:all linear 0.15s;
}
Relevant jQuery:
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordionSectionTitle').removeClass('active');
$('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}
$('.accordionSectionTitle').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
$(this).addClass('active');
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
HTML:
<div class="accordion">
<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion1" id="accordionSectionTitle1">Info</a>
<div id="accordion1" class="accordionSectionContent">
<p>Helpful info</p>
</div>
</div>
<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion2" id="accordionSectionTitle2">How long will it take?</a>
<div id="accordion2" class="accordionSectionContent">
<p>An estimate of time</p>
</div>
</div>
<div class="accordionSection"><a class="accordionSectionTitle" href="#accordion3" id="accordionSectionTitle3">How do I?</a>
<div id="accordion3" class="accordionSectionContent">
<p>.</p>
</div>
</div>
</div>
+3
source to share
2 answers
I created a violin.
https://jsfiddle.net/u6y7ezz4/1/
You may be upset, but you are missing a space :)
In your close_accordion_section function
function close_accordion_section() {
$('.accordion .accordionSectionTitle').removeClass('active');
$('.accordion.accordionSectionContent').slideUp(300).removeClass('open');
}
You are missing a space on the second line between .accordion and .accordionSectionContent
Correction:
function close_accordion_section() {
$('.accordion .accordionSectionTitle').removeClass('active');
$('.accordion .accordionSectionContent').slideUp(300).removeClass('open');
}
0
source to share
Make sure this is what you are trying to accomplish.
var headers = $('.accordion-section a');
var contentAreas = $('.accordion-section-content').hide();
var firstContentAreas = $('.accordion-section-content').hide().first().show();
headers.click(function(e) {
e.preventDefault();
var panel = $(this).parent('div').next('div');
var isOpen = panel.is(':visible');
contentAreas.slideUp();
panel[isOpen ? 'slideUp' : 'slideDown']()
.trigger(isOpen ? 'hide' : 'show');
$('.accordion-section a').not(this).removeClass('accordion-section-title');
$(this).toggleClass('accordion-section-title');
return false;
});
.accordion {
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background: #f5f5f5;
border: 1px solid #444;
border-radius: 0px;
font-family: "Verdana";
}
.accordion-section {
clear: both;
text-align: left;
border: 2px solid #444;
min-width: 200px;
min-height: 40px;
color: #fff;
background: #444;
display: block;
font-weight: 400;
padding: 10px 10px;
}
.accordion-section a,
.accordion-section a:active,
.accordion-section a:visited {
color: #fff;
text-decoration: none;
display: block;
padding: 10px;
}
.accordion-section-content {
padding: 5px 15px;
line-height: 1.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a href="#accordion-1" class="accordion-section-title">Accordion Section #1</a>
</div>
<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>
<!--end .accordion-section-content-->
<!--end .accordion-section-->
<div class="accordion-section"> <a href="#accordion-2" class="accordion-section-title">Accordion Section #2</a>
</div>
<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>
<!--end .accordion-section-content-->
<!--end .accordion-section-->
<div class="accordion-section"> <a href="#accordion-3" class="accordion-section-title">Accordion Section #3</a>
</div>
<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 ridicu.</p>
<!--accordion-section-content-->
<!--end .accordion-section-->
</div>
<!--end .accordion-->
0
source to share