I have a list to the right of the webpage, with 4 buttons.
When a button is clicked, its relevant content is displayed; this is achieved through JavaScript. An EventListener runs a function to toggle the class "active".
The button HTML element also has an onclick = myFunciton() that links to JS to hide the right arrow icon.
I want to make it so that only one of these content sections can be open at a time. How can I achieve this?
Here is my HTML code:
<div class="container-fluid">
<div class="sec2">
<h1>A 44-letter alphabet.</h1>
<h1>A phonetically consistent language.</h1>
<h1>A determined teacher you can count on.</h1>
</div>
<div class="sec3">
<ul class="sec2drop">
<li>
<button onclick="myFunction()" class="collapsible" id="colly1">
Prepare for a language exam
<i class="fa fa-caret-right" id="arrow0"></i>
</button>
<div class="content">
<p>
A hundred different reasons, one perfect outcome. Maybe you
were born to Hungarian parents abroad, and decided to take a
Hungarian language exam to replace one of your high school
leaving exams.
</p>
<p>
Maybe you're going to be an exchange student in Hungary or
work there for some time. I'm happy to prepare you in video
call sessions, both with verbal and written training.
</p>
</div>
</li>
<li>
<button onclick="myFunction()" class="collapsible" id="colly2">
Hungarian for kids
<i class="fa fa-caret-right" id="arrow1"></i>
</button>
<div class="content">
<p>
Many Hungarians living abroad would like to teach their
linguistics or national heritage. I will tailor online
sessions for your child that suites their and your needs the
best.
</p>
<p>
You decide if you would like to supervise or participate in
the lesson. Generally, children under 8 require parental or
older sibling presence.
</p>
</div>
</li>
<li>
<button onclick="myFunction()" class="collapsible" id="colly3">
Take on a challenge
<i class="fa fa-caret-right" id="arrow2"></i>
</button>
<div class="content">
<p>
Whether you spontaneously decided to learn one of the hardest
languages in the world, or you want to reconnect with your
Hungarian heritage, I will guide you along the way. Are you a
newbie or an advanced learner? Would you like specific types
of homework in between lessons? I will adapt to your needs.
</p>
</div>
</li>
<li>
<button onclick="myFunction()" class="collapsible" id="colly4">
Translation services
<i class="fa fa-caret-right" id="arrow3"></i>
</button>
<div class="content">
<p>
English to Hungarian or Hungarian to English. You can book my
written translation services and choose the package most
suitable to you.
</p>
</div>
</li>
</ul>
</div>
</div>
Here is my CSS code:
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: transparent;
cursor: pointer;
padding: 18px;
margin-left: 10px;
border: none;
font-size: 15px;
width: 100%;
display: flex;
justify-content: space-between;
}
/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0px 18px;
display: none;
overflow: hidden;
background-color: wheat;
}
Here is my JavaScript code:
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";
}
});
}
function myFunction() {
for (y = 0; y < 4; y++) {
var x = document.getElementById(`arrow${y}`);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
3
Answers
You can achieve this just to collapse all active elements. Check the collapseAll() function.
It may not be the best idea to use inline event listeners. Here is a minimal example, using event delegation, data-attributes to identify what needs to unfold, and a css class to activate the element to unfold.
Your website is perfectly suited for use of the The Details disclosure element.
The
<details><summary>element already incorporates an ‘open’/’close’ mechanism, therefore there is no need to create that with Javascript:<summary>element of a closed<details>element the mechanism adds the boolean attributeopento the<details>element and shows the content below the<summary>. Upon successive click that attribute gets removed and the details closed again, hiding the content..content) stay open until the user closes them again.As you want only one
.contentitem open at a time, simple Javascript functionality is required to close an already opened<details>before opening the next upon user click.In the snippet I changed the content of
.sec3to work with<details><summary>and added the forementioned simple Javascript to toggle.contentvisibility.I removed your FontAwesome icons and made
summaryof "Prepare for a language exam" work with FontAwesome while the other three details use the HTML default carets. This way you can see the difference and choose which to keep. "Prepare for a language exam" also showcases how to nest<details><summary>if so required.The snippet is commented and should be self-explanatory: