Show/hide div by button

Question

I am trying to show/hide a specific div by id depending on which button is selected, however while the correct content is being displayed, the rest of the page is being hidden. I would like that the buttons are kept on display whereas only the divs with the class name of material get hidden or shown depending on which button is selected. What is a possible way to fix this?

Code

JSFiddle.

$(document).ready(function() {
  $(".bob").click(function() {
    var divname = this.value;
    $("#material" + divname).show().siblings().hide();
  });

});

.material {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="type1" class="type">
  <h3>1.2 Select material v1</h3>
  <button class="bob" type="button" name="material" value="1">tiles 1</button>
  <button class="bob" type="button" name="material" value="2">tiles 2</button>
  <button class="bob" type="button" name="material" value="3">tiles 3</button>
</div>
<div id="material1" class="material">
  1
</div>
<div id="material2" class="material">
  2
</div>
<div id="material3" class="material">
  3
</div>

Answer 1

You should select specific siblings.

 $("#material"+divname).show().siblings('.material').hide();

DEMO

Answer 2

Try out this.

    <script>
$(document).ready(function(){
            $(".bob").click(function () {
            var divname = this.value;
               $("#material"+divname).show().siblings('.material').hide();
                });

          });
</script>

In additional to that answer you can also add active class on each active element.

   $(document).ready(function() {
  $(".bob").click(function() {
    var divname = this.value;
    $(this).addClass("active")
    $("#material" + divname).show().siblings('.material').hide();

    $(this).siblings('.bob').removeClass("active")

  });
});

See Demo

Answer 3

You can try something like this:

$(".material").hide();
$("#material" + divname).show();

Trick is to split both process of hiding and showing. In my understanding, this makes code simple to read and to understand.

Code

JSFiddle

$(document).ready(function() {
  $(".bob").click(function() {
    var divname = this.value;
    hideAllSiblings();
    $("#material" + divname).show();
  });
});

// This function can be used to reset states of all elements
function hideAllSiblings() {
  $(".material").hide();
}

.material {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="type1" class="type">
  <h3>1.2 Select material v1</h3>
  <button class="bob" type="button" name="material" value="1">tiles 1</button>
  <button class="bob" type="button" name="material" value="2">tiles 2</button>
  <button class="bob" type="button" name="material" value="3">tiles 3</button>
</div>
<div id="material1" class="material">
  1
</div>
<div id="material2" class="material">
  2
</div>
<div id="material3" class="material">
  3
</div>

Answer 4

Check out my DEMO

$(document).ready(function(){
            $(".bob").click(function () {
            var divname = this.value;
               $(".material").hide();
           $("#material"+divname).show();
                });

          });