Exploring a solution to the following challenge:
Looking for a method to create collapsible buttons (or similar objects) that:
- can be displayed in the same line
- reveal their content between the current and next line when clicked
- are responsive
- allow independent styling of title and content
Created a gif to visualize the desired outcome:
https://i.sstatic.net/Rfzu0.gif
Experimented with collapsible objects and details/summary tags so far.
Collapsible objects seem to address only features 2. and 4. As positioning the content manually affects responsiveness, achieving simultaneity is challenging.
Here's some code related to collapsible objects:
// JavaScript function to handle collapsible elements
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.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}.collapsible {
border: none;
background: none;
outline:none;
padding: 0;
font-size: 1em;
color: green;
}
.ccontent {
max-height: 0;
overflow: hidden;
background-color: #d3d3d3;
}Does <button class="collapsible">this</button> work?
<div class="ccontent">Yes!</div>
Good job!
<hr>
Does <button class="collapsible">this</button> and <button class="collapsible">this</button> work?
<div class="ccontent">no</div><div class="ccontent">yes</div>
OpsDetails/summary tags offer easier implementation but pose styling challenges.
Details/summary tags cover features 1. and 3., along with some aspects of feature 4. Combining both methods would ideally satisfy all requirements!
details {
display: inline;
color: red;
padding: 0;
background-color: #d3d3d3;
cursor: help;
}
details > summary {
display: inline;
background: none;
color: green;
list-style: none;
outline:none;
}
details > summary::-webkit-details-marker {
display: inline;
display: none;
}Does <details><summary>this</summary>so and so</details> work?
<p>Ops</p>
<hr>
Does <details><summary>this</summary>not</details> and <details><summary>this</summary>fully</details> work?
<p>Ops</p>In summary, collapsible buttons prioritize features 2 and 4, while details/summary tags cater to features 1 and 3. A combination could potentially fulfill all four requirements!
Is it feasible to achieve all four features using just one element?