CODEWITHSUNDEEP
jqueryshow-hide
ChriChri
ChriChri

Reputation: 275

Show/hide div by button

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>

Upvotes: 1

Views: 1054

Answers (4)

Little Phild
Little Phild

Reputation: 805

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

Upvotes: 1

Amar Singh
Amar Singh

Reputation: 5622

Check out my DEMO

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

          });

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

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>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You should select specific siblings.

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

DEMO

Upvotes: 4

Related Questions