jQuery аккордеон показать/скрыть на текущем контейнере

Question

Я создал аккордеон для страницы часто задаваемых вопросов, мне удалось получить ответы на вопросы/ответы, чтобы показать/скрыть, когда вы нажимаете, когда вы нажимаете на вопрос, который все остальные скрывают, а текущий вопрос открыт.

Единственная проблема заключается в том, что если вы попытаетесь закрыть текущий открытый вопрос, заголовок останется выделенным, поскольку он по-прежнему определяется как текущий вопрос.

Как это исправить?

Смотрите мою скрипку: https://jsfiddle.net/1cqk1540/1/

JQuery:

// Hide the answers (expanded content) 
$(".content .accordion span").hide(); 

// On question click 
$(".content .accordion .question").click(function(){ 
    // If the next element to the question is visible 
    if(false == $(this).next().is(':visible')) { 
     // Slide the answer up 
     $('.content .accordion span').slideUp(300); 
    } 

    // Toggle the slide of the next element to the question 
    $(this).next().slideToggle(300); 

    // Remove current class from the previous accordion container 
    $('.content .accordion.current').removeClass('current'); 

    // Remove current class from the current accordion container 
    $(this).parent().addClass('current'); 
}); 

Answer 1

Это то, что я изменил:

$('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current'); 

Тот, который щелкнул использует функцию toggleClass, и другие все используют функцию removeClass.

Демо:

// Hide the answers (expanded content) 
 

 
$(".content .accordion span").hide(); 
 

 
// On question click 
 

 
$(".content .accordion .question").click(function() { 
 

 
    // If the next element to the question is visible 
 

 
    if (false == $(this).next().is(':visible')) { 
 

 
    // Slide the answer up 
 

 
    $('.content .accordion span').slideUp(300); 
 

 
    } 
 

 
    // Toggle the slide of the next element to the question 
 

 
    $(this).next().slideToggle(300); 
 

 
    // Remove current class from the previous accordion container 
 

 
    $('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current'); 
 

 
    // Remove current class from the current accordion container \t 
 

 
});

.accordion { 
 
    border: 1px solid #666666; 
 
    margin-bottom: 10px; 
 
    padding: 10px 
 
} 
 

 
.accordion.current .question { 
 
    color: #FF0000; 
 
} 
 

 
.accordion .question { 
 
    color: #333333; 
 
    text-decoration: none; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 

 
.accordion span { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="accordion"> 
 
    <a href="#q" class="question">Q1 Aenean varius tincidunt arcu?</a> 
 
    <span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p> 
 
    </span> 
 
    </div> 
 
    <div class="accordion"> 
 
    <a href="#q" class="question">Q2 Aenean varius tincidunt arcu?</a> 
 
    <span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p> 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

вам за каждый клик добавить класс .Current. правильный код https://jsfiddle.net/xbh7bx02/

if(!$(this).parent().hasClass('current')) 
    { 
     $('.content .accordion.current').removeClass('current'); 
     // Remove current class from the current accordion container 
     $(this).parent().addClass('current'); 
    } else { 
     $('.content .accordion.current').removeClass('current'); 
     // Remove current class from the current accordion container 
    }