CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptoggle
Caio Oliveira
Caio Oliveira

Reputation: 35

How to toggle Element that is clicked and hide all other using bootstrap?

How to toggle Element that is clicked and hide all other using bootstrap V3.5?

this is my code:

<div id="buttons" style="padding: 50px;">
      <a data-toggle="collapse" data-target="#item-01">
        <button class="btn btn-default">
          Item-01
        </button>
      </a>

      <a data-toggle="collapse" data-target="#item-02">
        <button class="btn btn-default">
          Item-02
        </button>
      </a>
    </div>

    <div id="itens">
        <div class="collapse" id="item-01">
          <span>Item 01</span>
        </div>
        <div class="collapse" id="item-02">
          <span>Item 02</span>
        </div>
    </div>

DEMO page.

Upvotes: 2

Views: 2873

Answers (1)

Mike Horstmann
Mike Horstmann

Reputation: 588

You should probably put the data-target attribute on the buttons themselves, but your code as is... use the following in jQuery:

$("button").on("click", function(){
  var alertMsg = $(this).parent().data("target");
  alert(alertMsg); //First grab the data-target from the button's parent, or alternatively the button itself as I would recommend.
  //Note, you have a typo which I moved forward with below.
  
  /* var itemToShow = "#" + alertMsg;
  alert(itemToShow); */
  
  // I would recommend as well you don't use hashtags in your data-* 
  // elements. Rather as shown here, add the hashtag in with code. 
  $("#itens .collapse").hide();  //first hide all of the elements
  $(alertMsg).show();  //then show the element related to your button click event data-target id. 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="buttons" style="padding: 50px;">
      <a data-toggle="collapse" data-target="#item-01">
        <button class="btn btn-default">
          Item-01
        </button>
      </a>

      <a data-toggle="collapse" data-target="#item-02">
        <button class="btn btn-default">
          Item-02
        </button>
      </a>
    </div>

    <div id="itens">
        <div class="collapse" id="item-01">
          <span>Item 01</span>
        </div>
        <div class="collapse" id="item-02">
          <span>Item 02</span>
        </div>
    </div>

Upvotes: 2

Related Questions