Открытие и закрытие аккордеона при нажатии ссылки с помощью jQuery ⇐ Jquery

[Anonymous]

Я пытаюсь открыть и закрыть аккордеон по ссылке. Я использую jQuery.
Вы можете увидеть скрипку здесь - https://jsfiddle.net/squidraj/x1epjfv7/11/
Аккордеон работает хорошо, если я просто нажимаю на панель.
Шаги, чтобы воспроизвести проблему:

• Нажмите кнопку «Читать далее» в заголовке. 1» — откроется окно «Название 1».
• Нажмите на поле «Название 1», чтобы закрыть панель. Переключатель работает хорошо.
  < li>Теперь повторите шаг 1 — работает нормально
• Повторите шаг 2 — панель не закрывается, в этом и есть проблема. Это работает, когда я нажимаю на панель второй раз.

Код: Выделить всё

$("a.button").on("click", function(e) {
e.preventDefault();

$(".accordion-wrapper div:nth-child(1) article").attr('style', 'max-height:inherit;');
$(".accordion-wrapper input[id=1]").attr('checked', true);
});

//Closing the accordion

$(".accordion-wrapper label").on("click", function(e){
const next = $(this).next()[0];
if (next.style.maxHeight) {
next.style.maxHeight = "";
}
});  

Код: Выделить всё

div input {
display: none;
}
.accordion-wrapper{
margin: 2rem 0;
div{
margin: 1rem 0;
}
}
.accordion-wrapper article{
background: rgba(255, 255, 255, 0.25);
overflow: hidden;
max-height: 0px;
position: relative;
transition: max-height 0.3s ease-in-out;
border: 1px solid #eee;
padding: 0 15px;
}

.accordion-wrapper label {
position: relative;
display: block;
cursor: pointer;
color: #777;
font-size: 1.1em;
background: #eeeeee;
margin: 0;
padding: 10px 15px;
border: 1px solid #eee;
border-bottom: 1px solid transparent;
}

.accordion-wrapper input:checked ~ article{
max-height: inherit;
}

Код: Выделить всё

[url=1]Read more title 1[/url]




Title 1

Content 1



Title 2

Content 2

Похоже, что состояние скрытого флажка все еще не отмечено (false), и, следовательно, панель не закрывается на шаге 4.

Подробнее здесь: https://stackoverflow.com/questions/779 ... ing-jquery