Секция аккордеона JQuery отскакивает назад, когда я закрываю ее

Question

У меня есть три секции аккордеона, и я хочу, чтобы первый был открыт (с двумя другими закрытыми), когда я впервые прихожу на страницу. Я отдал все три (то есть, «accordionSectionContent», как показано ниже) Seperate идентификаторы (в верхней части их общего класса «accordionSectionContent») и для первого я заявил:

#accordion1 { 
display:block; 
} 

Все хорошо, за исключением того, если я нажму на его название в начале (хотя оно уже открыто), оно закрывается, а затем снова отскакивает. Если я снова нажму на него, он снова не отскакивает, а закрывается. Проблема должна быть со следующим кодом (просьба изменить и просветить):

Соответствующий CSS:

.accordionSectionContent { 
display:none; 
} 

.accordionSectionTitle { 
width:100%; 
display:inline-block; 
transition:all linear 0.15s; 
} 

Соответствующие 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> 

Answer 1

Я создал скрипку.

https://jsfiddle.net/u6y7ezz4/1/

Вы можете расстроиться, но вам не хватает места :)

В функции close_accordion_section

function close_accordion_section() { 
    $('.accordion .accordionSectionTitle').removeClass('active'); 
    $('.accordion.accordionSectionContent').slideUp(300).removeClass('open'); 
} 

вам не хватает места на второй линии между .accordion и .accordionSectionContent

Исправление составляет:

function close_accordion_section() { 
    $('.accordion .accordionSectionTitle').removeClass('active'); 
    $('.accordion .accordionSectionContent').slideUp(300).removeClass('open'); 
} 

Answer 2

Посмотрите, если это то, что вы пытаетесь выполнить.

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-->