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";
}
}
}
