$('.question-js').on('click', function () { $(this).toggleClass('active'); $(this).parent().children('p').slideToggle(); });
<ul class="list-questions"> <li> <div class="question-js"><span>Вопрос 1</span></div> <p>Ответ 1</p> </li> <li> <div class="question-js"><span>Вопрос 2</span></div> <p>Ответ 2</p> </li> <li> <div class="question-js"><span>Вопрос 3</span></div> <p>Ответ 3</p> </li> </ul>
.list-questions { margin-bottom: 25px; overflow: hidden; list-style: none; padding: 15px; } .list-questions li { margin-bottom: 20px; } .list-questions .question-js { border: 1px solid #FCA311; color: #213663; cursor: pointer; font-size: 21px; margin-bottom: 20px; padding: 17px 25px; position: relative; } .list-questions .question-js:hover { border-color: #FCA311; } .question-js span { border-bottom: 1px dashed #14213D; } .list-questions li p { background: #213663; color: #fff; display: none; font-size: 18px; line-height: 1.7; padding: 30px; position: relative; } .list-questions li p:before { border-bottom: 10px solid #213663; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ''; display: block; height: 0; left: 30px; position: absolute; top: -10px; width: 0; }