Exploring Options and Background
I have been experimenting with creating an expandable/collapsable accordion for displaying restaurant food choices, envisioning a digital menu akin to Just-Eat or Hungry House.
My attempt involves using W3Schools' Animated Accordion tutorial to build this digital food menu. https://www.example.com/howto_js_accordion
The Challenge at Hand
In the code snippet, you can observe that I have tried to place the
<button class="accordion">The issue arises when expanding the nested accordion; it fails to enlarge its parent container, leading to obscured or truncated child content.
To address this problem, collapsing the parent accordion after opening the child one is necessary. However, this approach may inconvenience users.
Suggested Course of Action
A potential solution could involve adjusting the CSS properties to ensure that the accordion containers automatically adapt to their content. Currently, they seem rigid until clicked on.
I am also open to alternative suggestions regarding the implementation of this 'digital menu' concept.
Sample Code Illustration
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="accordion">Section 1</button>
<div class="panel">
<p>The Text in Section 1</p>
<button class="accordion">Section 2</button>
<div class="panel">
<p>The Text in Section 2</p>
</div>
</div>