hide/show toggle on click

stays open until closed

by pixeloco

HTML

<h1>Example with divs</h1>
<div class="question">I Should Start Open</div>
<div class="answer">This content to show on load.</div>

<div class="question">Click To Read Me</div>
<div class="answer">Hello content goes here</div>

<div class="question">Another Row</div>
<div class="answer">Hello content goes here</div>

CSS

.question {
    background-color: #aaa;
    cursor: pointer;
    padding: 5px;
    position: relative;
    border:1px solid #fff;
    margin: 0;
}
.answer {
    background-color: #ccc;
    overflow: hidden;
    padding: 10px;
}

JavaScript

$(document).ready(function () {
    
    $(".answer").hide();
    $(".question").click(function () {
        $(this).next(".answer").toggle();
    });
        jQuery('.question:first-of-type').trigger('click'); //remove this line if you want them to all start closed


});