I'm new to HTML and CSS, currently working on designing a website for our conference. I've implemented a toggle effect for displaying the information about invited speakers along with their research interests using the following code:
<!DOCTYPE html>
<html>
<head>
<style>
.maindrop{
width:50%;
}
.bar{
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
}
.bar:hover{
background: gray;
}
.dropbox{
height: 0;
transition: 1s;
overflow: hidden;
width : 100%;
transition-property: background;
transition-timing-function: linear;
}
.dropbox:target{
height:auto;
}
</style>
</head>
<body>
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
// Speaker 1 Details
</div>
</div>
...
<div class="fold">
<a class="bar" href="#tab4">Speaker 4</a>
<div class="dropbox" id='tab4'>
// Speaker 4 Details
</div>
</div>
</div>
</body>
</html>
Issues Faced:
The animation isn't functioning as expected. The drop-down box should appear smoothly and gradually. It seems like there might be an issue with the animation implementation.
Any pointers on correcting this?
Additionally, after clicking once to expand the boxes, is there a way to reset them upon a second click?
PS: Suggestions for enhancing the styling are welcome! A polished and sophisticated display of information regarding conference speakers is what I aim for.