Dynamic hide/show divs after click on respective buttons with jQuery

Question

I have some divs that, when clicked, have to show other specific divs (with relative content) and hide all the others. I think it's a very simple request, but it gave me headache.

this is my code, hope that someone can help me:

$('.finiture-wrapper').on('click', function() {
        var idBtn = $(this).data('id');
        //console.log(idBtn);     
        if(idBtn == $('allestimento-img-wrapper').data('id')){
        $('allestimento-img-wrapper').css('display', 'flex')
        }
        else{
        $('allestimento-img-wrapper').css('display', 'none')
        }
        
    })        

.allestimento-img-wrapper{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="allestimento-img-wrapper"  data-id="silver-bagno-1">content 1</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-2">content 2</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-3">content 3</div>

I've used data-id to connect the two divs but i can't properly show it. Plus, I'm trying to use if/else statement but maybe there is a smarter way.

Thank you. P.s. I'm super new to jquery, and this question may seems stupid.

Answer 1

you should first hilde all other div and then from btn id open the selected div, your html should be like this

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="allestimento-img-wrapper"  id="div_silver-bagno-1">content 
1</div>
<div class="allestimento-img-wrapper" id="div_silver-bagno-2">content 
2</div>
<div class="allestimento-img-wrapper" id="div_silver-bagno-3">content 
3</div>

your javascript shold be like this

$('.finiture-wrapper').on('click', function() {
    //first hide all other div
    $(".allestimento-img-wrapper").hide();
    var idBtn = $(this).data('id');
    //now open the selected div
    $("#div_"+idBtn).css('display', 'flex');
})