365
edits
FVillaggi
Joined 20 December 2021
no edit summary
No edit summary |
No edit summary |
||
| Line 29: | Line 29: | ||
</head> | </head> | ||
<body> | <body> | ||
<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> | |||
<script> | |||
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 === "block") { | |||
content.style.display = "none"; | |||
} else { | |||
content.style.display = "block"; | |||
} | |||
}); | |||
} | |||
</script> | |||
</body> | |||
</html> | |||