I'm not familiar with javascript and I tried it all day long without success so I would like to ask you for help. I found this code which switching sections based on clicked button. So when one button is clicked and active one section is visible and other are hidden. When I click active button again all sections are hidden and buttons are inactive. I would like to keep always one section visible. I want to prevent second click to hide all sections. Only option would be to to switch to other button -> switch section but have no idea how to do it.
Here is code and site where I got it https://wpjunction.net/elementor-toggle-visibility/
<script>
var divs
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1",this);
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2",this);
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3",this);
};
function toggleDivs(s,btn){
if(btn.classList.contains("btn_active_state")){
document.getElementById(s).classList.remove("shown");
btn.classList.remove("btn_active_state");
document.getElementById(s).classList.remove("shown");
return;
}else{
btn1.classList.remove("btn_active_state");
btn2.classList.remove("btn_active_state");
btn3.classList.remove("btn_active_state");
btn.classList.add("btn_active_state");
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById(s).classList.add("shown","fade");
}
}
//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
</script>
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
animation: fade_in_anim 0.5s;
}
.btn_active_state{
background-color: #FFCC00 !important;
}
@keyframes fade_in_anim {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
</style>