How can I implement a dropdown toggle effect on my website using the code above?
I want the first box to display the dropdown content by default when the page is refreshed. When another box is clicked, the dropdown content of the previous box should hide itself.
Any suggestions on how to achieve this?
.maindrop {
width: 49%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
margin-bottom: .1cm;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .5s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}<div class="maindrop" style="float: right">
<div class="fold default">
<a class="bar" href="#tab5">Speaker 5</a>
<div class="dropbox" id='tab5'>
Insert your content here
</div>
</div>
<div class="fold">
<a class="bar" href="#tab6"> Speaker 6</a>
<div class="dropbox" id='tab6'>
Insert your content here
</div>
</div>
<div class="fold">
<a class="bar" href="#tab7"> Speaker 7</a>
<div class="dropbox" id='tab7'>
Insert your content here
</div>
</div>
<div class="fold">
<a class="bar" href="#tab8"> Speaker 8</a>
<div class="dropbox" id='tab8'>
Insert your content here
</div>
</div>
</div>