CODEWITHSUNDEEP
javascriptjqueryhtmlhideshow
user2756384
user2756384

Reputation: 33

Clickable div except for links and buttons

On my web app, I have a div that hides when clicked. Then a new div (video) appears. My problem is that I have an upvote button and a link in the first div, but if you click those, the div hides and pops up the video instead of the wanted functionality.

How can I have it so if they click the button or the link, it doesn't hide the first div and show the video?

<script type="text/javascript">
 $(function () {
  $('.videoDiv').hide();
  $('.firstDiv').on('click', function () {
   $('.videoDiv').show();
   $('.firstDiv').hide();
  });
 });
</script>

First Div:

<div class="panel-body firstDiv">
  <div class="col-xs-7 col-sm-8 col-md-7">
    <a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a>
  </div>
  <div class="col-xs-2 col-sm-2 col-md-2">
    <div class="btn-group-vertical pull-right" role="group">
      <a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote">
        <span class="glyphicon glyphicon-chevron-up"></span>
      </a>
    </div>
  </div>
</div>

Video Div:

<div class="panel-body videoDiv">
  <div class="video-js-box">
    <video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}">

    </video>
  </div>
</div>

Upvotes: 0

Views: 1568

Answers (2)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

Exclude events for link /upvote button that is, apply click function on div and check it is not on .btn only then execute your statements. Also, you need to check if target is not child of .btn

 <script type="text/javascript">
 $(function () {
    $('.videoDiv').hide();
    $('.firstDiv').on('click', function (e) {
    if (!$(".btn").is(e.target) //not clicked on .btn
          && $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn
      {
        $('.videoDiv').show();
        $('.firstDiv').hide();
      }
   });
});
</script>

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing .is() , calling .show() , .hide() if e.target does not have btn class

$(function () {
  $(".videoDiv").hide();
  $(".firstDiv").on('click', function (e) {
   if (!$(e.target).is(".btn")) {
     $(".videoDiv").show();
     $(".firstDiv").hide();
   };
  });
});

Upvotes: 1

Related Questions