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. Ps 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');
})        

Answer 2

$('.finiture-wrapper').on('click', function() {
        var idBtn = $(this).data('id');

        if(idBtn === $('allestimento-img-wrapper').data('id')){
         $('.allestimento-img-wrapper').css('display', 'flex')
         $('.allestimento-img-wrapper').data('id');
        }
        if(if(idBtn !== $('allestimento-img-wrapper').data('id')){
         $('.allestimento-img-wrapper').css('display', 'none');
        }
       })

I think U forgot the (.) point in jQuery. Hope It will solve the problem.

Answer 3

you can simply show and hide div by jquery show and hide function.

Check the below code it might help you.

$('allestimento-img-wrapper').show(); //To show the div.
$('allestimento-img-wrapper').hide(); //To hide the div.

Answer 4

I used data-id selector to get the corresponding data-id of the div Hope this solves your problem, thanks

 $('.finiture-wrapper').on('click', function() { $(this).siblings('div[data-id="'+$(this).attr('data-id')+'"]').removeClass('allestimento-img-wrapper').siblings('div').addClass('allestimento-img-wrapper') }) 

 .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> <button class="finiture-wrapper" data-id="silver-bagno-4">bagno 4</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> <div class="allestimento-img-wrapper" data-id="silver-bagno-4">content 4</div> 

Answer 5

I have edited the code please check.

<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="silver-bagno-1 commonclass"  >content 1</div>
<div class="silver-bagno-1 commonclass" >content 2</div>
<div class="silver-bagno-1 commonclass" >content 3</div>

<script>
$(".finiture-wrapper").click(function(){
var getbtnid=$(this).data("id");
$(".commonclass").hide();
$("."+getbtnid).show();
};

</script>

Answer 6

Just Change your jQuery without If else Condition

 $('.finiture-wrapper').on('click', function() { var idBtn = $(this).data('id'); $('.allestimento-img-wrapper').css('display', 'none') $('div[data-id*=' + idBtn + ']').css('display', 'flex'); }); 

 .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>