You do have to change the css of .content to display: block; but also, you'll have to change the JavaScript so that when you click on the open collapsible it closes. Otherwise, you'll have to click on it twice for it to close, as on the first click it still doesn't have any content.style.display.
In particular this check here:
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
See the snippet below:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (!content.style.display || content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
display: block;
overflow: hidden;
background-color: #f1f1f1;
}<h2>Collapsibles</h2>
<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
Thank you!!! Then I was on the right track - I though I needed to change the CSS of the .content to display:block; but I didn't know what to do with the JavaScript. I'm still don't understand how that JS change works, but it does do what I want, I wish I knew JS. But, now I have a problem with my CSS because, I have added border-radius to mine. So when it's open, it works fine, but when it's closed I don't know how to have the rounded border on the .container button - how to I give "not active" CSS code, I guess?
You're welcome! You can use
console.dir()to check the properties of your html elements, that might help you understand.I can't seem to figure out how to share my CSS code to see what I mean about the problem with the .container button not having the correct rounded border-radius when collapsed...
The above sounds like a different issue from this question, I'd suggest creating another question with the rounded border-radius problem.
console.dir()is used the same way asconsole.log(), it just gives you more information about the object's properties.