My issue involves managing 3 div elements and 3 buttons. Each button is responsible for opening a specific div, but when one div is opened, the others must be closed. While I was able to achieve this with some JavaScript code, my coding skills are minimal.
Each button is assigned a class: .button-1, .button-2, and .button-3.
The divs are distinguished by different IDs: #div-1, #div-2, and #div-3.
Here is the code snippet I am currently using (repeated for each button and div):
jQuery(document).ready(function() {
// Hide the div
jQuery('#div-1').hide();
jQuery('.button-1').click(function(e){
e.preventDefault();jQuery("#div-1").slideToggle('opened closed');
});
});
jQuery(function($){
$('.button-1').click(function(e){
e.preventDefault();
$('#div-2').hide();
$('#div-3').hide();
});
});
While the code works well for opening and closing the same div smoothly, transitioning between different divs with open/close effects isn't as smooth.
Do you have any suggestions?
You can check out an example on jsFiddle.
I'm wondering if it's possible to prevent users from closing the .divs once one of them has been opened.
Thank you in advance!