I'm currently facing an issue with implementing a toggle feature in a particle manner. I have three divs with onclick events and each has a toggle CSS class. My goal is to ensure that when one div is clicked, if the others are active, they revert back to their previous state. Can someone guide me on the best approach for achieving this?
function handleToggle(clicked_id) {
var id = (clicked_id);
document.getElementById(id).classList.toggle('active');
}.container {
/* CSS code for container */
}
.active {
/* CSS code for active state */
}
<div class="container" id="1" onclick="handleToggle(this.id);">
<p>Content here</p>
</div>
<div class="container" id="2" onclick="handleToggle(this.id);">
<p>More content here</p>
</div>
<div class="container" id="3" onclick="handleToggle(this.id);">
<p>Even more content here</p>
</div>