Как сделать блок с вопросом по клику на который выпадает ответ?

Frontend developer JavaScript
1

Подскажите пожалуйста как такое реализовать, оно должно выглядеть примерно так:

Несколько блоков с вопросами, один под одним, когда нажимаешь на вопрос из под него выпадает ответ, как такое сделать?)

2

Насколько я понял, что то типо этого?)



<div class="container">

    <div class="frame">

        <p class="question">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et massa erat. Ut bibendum ligula et nulla molestie posuere. Pellentesque quis finibus leo. Sed eget risus vel magna condimentum tincidunt efficitur vel justo.

        <p class="answer hide">Nunc a justo nulla. Nullam lacinia quis leo eu auctor. Aenean id tincidunt metus, et hendrerit quam. Praesent ut diam vel ligula sollicitudin luctus non ac est. Etiam odio dolor, semper interdum nibh vitae, finibus semper orci. Vivamus ut porta nisl. Nulla egestas rhoncus lectus laoreet posuere.

    



.container {

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 900px;

    height: 1200px;

    margin: auto;

    margin-top: 40px;

}



.frame {

    background-color: steelblue;

    padding: 20px;

    cursor: pointer;

}



.question, .answer {

    margin: 0px;

    color: white;

}



.answer {

    margin-top: 10px;

}



.hide {

    display: none;

}

$('.question').on('click', function () {

    $(this).next('.answer').slideToggle().closest('.frame').siblings().find('.answer').hide('500');

})