CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Shawn Taylor
Shawn Taylor

Reputation: 15740

toggle class with js, only to selected div

I am trying to toggle visibility on a div by clicking a button in a neighboring div. I'm using a class .expand to fire the onClick and another class .target as the target, but the problem is that every div with the .target class fires onClick, instead of just the one I want. Logically, I understand why that's happening, but I don't know how to get around it... Here is a bootply: http://www.bootply.com/oSGM0jOG6q#.

$('.expand').on('click', function(e){

    $(".target").toggleClass("hidden");
    $(".target").toggleClass("visible");

});

HTML 

 <!-- Thumbnail -->
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="//placehold.it/400x300&amp;text=Photo1">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p><a href="#" class="btn btn-primary expand" role="button">Expand</a></p>
      </div>
    </div>
  </div>

  <!-- Big-Image -->
  <div class="col-xs-12 target hidden">
    <div class="thumbnail">
      <img src="//placehold.it/1200x900&amp;text=Photo1">
      <div class="caption">
        <h3>HighRes</h3>
        <p><a href="#" class="btn btn-primary btn-danger expand" role="button">Close</a></p>
      </div>
    </div>
  </div>

PS - I prefer to use bootstrap's hidden/visible classes for clean markup, but am not totally stuck on it.

Upvotes: 2

Views: 1321

Answers (4)

chrisg
chrisg

Reputation: 1117

To use a declarative approach that doesn't tie the JavaScript too heavily to the DOM structure, you could set data-target on each button element to specify the target element to be toggled when the button is clicked, and update the click handler to find the element(s) identified.

For example:

$('.expand').on('click', function(e){
  var sel = $(e.target).data("target");
  if (sel) {
    $(sel).toggleClass("hidden");
    $(sel).toggleClass("visible");
  }
});

And in the HTML:

<!-- Thumbnail -->
<div class="col-sm-4">
    <a href="#" class="btn expand" data-target="#bigImage" role="button">Expand</a>
</div>

<!-- Big-Image -->
<div id="bigImage" class="hidden">
    This div will be hidden/shown when the button is clicked
</div>

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use .closest() to get the static parent, i just meant static parent as .thumbnail, since col-sm-4 this class would get change depends upon the layout, i assume. So grab the closest .thumbnail and get its parent then target the next sibling to it.

$('.expand').on('click', function(e){
    $(this).closest('.thumbnail').parent().next('.target').toggleClass("hidden visible");
});

DEMO

Upvotes: 1

Pratik Bhoir
Pratik Bhoir

Reputation: 2144

Here is your bootply http://www.bootply.com/gk8gtlaH1L

Add a div with a new Expand wrapping both the divs. It would be easy for you :)

JS CODE

$('.newExpand').on('click', function(e){

    $(this).find(".target").toggleClass("hidden");
    $(this).find(".target").toggleClass("visible");

});

HTML CODE

<div class="newExpand">
  <!-- Thumbnail -->
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="//placehold.it/400x300&amp;text=Photo1">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p><a href="#" class="btn btn-primary expand" role="button">Expand</a></p>
      </div>
    </div>
  </div>

  <!-- Big-Image -->
  <div class="col-xs-12 target hidden"><!-- use js to add/remove class"hidden" on button click -->
    <div class="thumbnail">
      <img src="//placehold.it/1200x900&amp;text=Photo1">
      <div class="caption">
        <h3>HighRes</h3>
        <p><a href="#" class="btn btn-primary btn-danger expand" role="button">Close</a></p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use .closest() to find parent div with class col-sm-4 then use .next() to find target

$('.expand').on('click', function(e){
    $(this).closest('.col-sm-4').next(".target").toggleClass("hidden visible");
});

Upvotes: 1

Related Questions