I have a collapsible section that works, but I want it to be closed on load, and it’s not working for some reason. Also, is there any way I can make it change text when it’s open as to when it’s closed?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align: justify;
text-justify: inter-word;
}
div.centered {
width: 1250px;
position: absolute;
top: 0px;
left: 50%;
bottom: 0px;
margin-left: -625px;
}
div.centered div.content {
padding: 20px 50px 0px 50px;
}
div.centered div.content div.heading {
border-bottom: solid 1px #400000;
font-size: 8pt;
font-weight: bold;
color: #400000;
margin-bottom: 5px;
}
div.centered div.content div.credentials {
font-size: 8pt;
font-weight: bold;
color: #400000;
margin-bottom: 5px;
text-align: center;
}
blockquote {
margin: 10px 20px 10px 20px;
padding: 5px 10px 5px 10px;
border: dashed 1px #804040;
color: #400000;
background-color: #F4F0F0;
}
div.footer {
height: 20px;
padding: 0px 50px 0px 50px;
border-top: dashed 1px #808080;
margin-top: 20px;
color: #808080;
font-size: 7pt;
}
</style>
</head>
<body>
<div class="centered">
<div class="content">
<div type="button" class="collapsible heading">Open Collapsible</div>
<div class="collapsible_content">
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius id diam in pretium. Nam sed neque vel nisl sagittis vestibulum. Donec molestie gravida mollis. Sed sit amet orci ac odio euismod elementum dignissim sed quam. Sed ullamcorper, nisi sed mollis maximus, lorem diam accumsan metus, et volutpat felis eros ut erat. Nunc iaculis mattis pharetra. Aenean dictum odio non pharetra dignissim. Aliquam vehicula cursus nisi eget suscipit. Aenean imperdiet semper orci, quis porta risus. Quisque imperdiet mattis lacus, fermentum lacinia tellus vulputate et. Proin diam neque, porttitor nec ultricies et, vestibulum ac risus.<br />
<br />
Sed in bibendum purus. Donec auctor ornare lobortis. Sed consectetur fermentum tellus, at luctus velit semper ac. Sed vitae enim turpis. Quisque sollicitudin massa condimentum dui fringilla, a auctor ex sagittis. Aenean finibus arcu in consequat venenatis. Curabitur sed orci eu purus vulputate faucibus ac non erat. Nam suscipit aliquam purus, ac iaculis lectus tincidunt id.<br />
<br />
Etiam sollicitudin porta nisi, vitae aliquam justo sollicitudin pulvinar. Nullam massa ipsum, elementum et pharetra lobortis, elementum at tortor. Ut tincidunt orci et nisl porttitor, nec pharetra justo elementum. Integer lobortis finibus augue ac feugiat. Maecenas interdum ornare lacus in feugiat. Sed volutpat lacinia ligula, in semper sem vehicula et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque rhoncus vehicula iaculis. Sed vel feugiat nisl. Suspendisse at nibh rhoncus, congue elit id, congue nisi. Praesent nibh magna, tristique ut mauris id, consequat viverra est. Nam placerat ex ac neque egestas feugiat non eu risus.
<!-- END CONTENT -->
<script>
// Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("inactive");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
document.querySelector('.collapsible').addEventListener('click', function(e) {
if (e.target.innerText == "Close Collapsible") {
e.target.innerText = "Close Collapsible";
} else {
e.target.innerText = "Open Collapsible";
}
});
</script>
</div>
</div>
<div class="footer">
End of Document
</div>
</div>
</body>
</html>
Above is what I have so far, some code was hijacked from another site and modified, though I don’t remember how it was modified.
>Solution :
I’ve created a code snippet using the code from your question which outlines how you can close the .collapsable content on load and change the title.
I removed your second event listener and added the desired change to the innerText into the first eventListener.
I made the for loop change the .collapsable content on load to display: none before the eventListener was added.
This way the title opens and closes using the eventListener as intended while also changing the title.
I left your HTML and CSS untouched for the most part. I had to change the margin-left to -50% so that you could see the collapsable content in the snippet viewer, but that was it.
Let me know if you have any questions,
// Collapsible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].nextElementSibling.style.display = "none";
coll[i].addEventListener("click", function() {
this.classList.toggle("inactive");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
this.innerText = "Open Collapsible";
} else {
content.style.display = "block";
this.innerText = "Close Collapsible";
}
});
}body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align: justify;
text-justify: inter-word;
}
div.centered {
width: 1250px;
position: absolute;
top: 0px;
left: 50%;
bottom: 0px;
margin-left: -50%;
}
div.centered div.content {
padding: 20px 50px 0px 50px;
}
div.centered div.content div.heading {
border-bottom: solid 1px #400000;
font-size: 8pt;
font-weight: bold;
color: #400000;
margin-bottom: 5px;
}
div.centered div.content div.credentials {
font-size: 8pt;
font-weight: bold;
color: #400000;
margin-bottom: 5px;
text-align: center;
}
blockquote {
margin: 10px 20px 10px 20px;
padding: 5px 10px 5px 10px;
border: dashed 1px #804040;
color: #400000;
background-color: #F4F0F0;
}
div.footer {
height: 20px;
padding: 0px 50px 0px 50px;
border-top: dashed 1px #808080;
margin-top: 20px;
color: #808080;
font-size: 7pt;
}<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div class="centered">
<div class="content">
<div type="button" class="collapsible heading">Open Collapsible</div>
<div class="collapsible_content inactive">
<br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius id diam in pretium. Nam sed neque vel nisl sagittis vestibulum. Donec molestie gravida mollis. Sed sit amet orci ac odio euismod elementum dignissim sed quam. Sed ullamcorper,
nisi sed mollis maximus, lorem diam accumsan metus, et volutpat felis eros ut erat. Nunc iaculis mattis pharetra. Aenean dictum odio non pharetra dignissim. Aliquam vehicula cursus nisi eget suscipit. Aenean imperdiet semper orci, quis porta risus.
Quisque imperdiet mattis lacus, fermentum lacinia tellus vulputate et. Proin diam neque, porttitor nec ultricies et, vestibulum ac risus.<br />
<br /> Sed in bibendum purus. Donec auctor ornare lobortis. Sed consectetur fermentum tellus, at luctus velit semper ac. Sed vitae enim turpis. Quisque sollicitudin massa condimentum dui fringilla, a auctor ex sagittis. Aenean finibus arcu in
consequat venenatis. Curabitur sed orci eu purus vulputate faucibus ac non erat. Nam suscipit aliquam purus, ac iaculis lectus tincidunt id.<br />
<br /> Etiam sollicitudin porta nisi, vitae aliquam justo sollicitudin pulvinar. Nullam massa ipsum, elementum et pharetra lobortis, elementum at tortor. Ut tincidunt orci et nisl porttitor, nec pharetra justo elementum. Integer lobortis finibus
augue ac feugiat. Maecenas interdum ornare lacus in feugiat. Sed volutpat lacinia ligula, in semper sem vehicula et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque rhoncus vehicula iaculis. Sed vel
feugiat nisl. Suspendisse at nibh rhoncus, congue elit id, congue nisi. Praesent nibh magna, tristique ut mauris id, consequat viverra est. Nam placerat ex ac neque egestas feugiat non eu risus.
<!-- END CONTENT -->
</div>
</div>
<div class="footer">
End of Document
</div>
</div>
</body>
</html>