CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David
David

Reputation: 67

How to displaying and hiding again the div after clicking a button

I would like to display a hidden div after clicking a button by adding an extra class addClass("open"); and then using css to display them when it is active open class.

$(".btt").click(function(event){
   ($(event.currentTarget).parent().parent()).addClass("open");
});
.surveySummaryList>li .surveySummaryMenu {
  background: rgba(0, 0, 0, 0.6);
  position:absolute;
  left: 100%;
  top: 0;
  display: none;
  color: white;
  width: 100%;
  min-width: 250px;
  z-index: 1001;
}

.surveySummaryList>li.open >.surveySummaryMenu {
  display: inherit;
  transition: all 1s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav surveySummaryList">
  <li>
    <a href="javascript:" data-bind="click: $root.surveyClicked">
      <span>Name</span>
      <button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
    </a>
    <div class="surveySummaryMenu">
      <ul class="nav navbar">
        <li>
          <a href="javascript:" data-bind="click: $root.surveyClicked">
             <span> Sub Name </span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

And only when I click to the button, the div class= surveySummaryMenu should display, even if I click this <a> tag, it should not display. It seems working but then after clicking to the button, the div .surveySummaryMenu will stay remain forever, how can I hide it again after clicking somewhere else, not the button?

Upvotes: 1

Views: 184

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

When you want to use the event object for event.currentTarget, you need to pass it to the callback function.

like this:

$(".btt").click(function(event) {

The working code:

$(".btt").click(function() {
  $(this).parent().parent().addClass("open");
});

$('.nav a').click(function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('.open').removeClass('open');
});
.surveySummaryList>li .surveySummaryMenu {
  background: rgba(0, 0, 0, 0.6);
  position:absolute;
  left: 100%;
  top: 0;
  display: none;
  color: white;
  width: 100%;
  min-width: 250px;
  z-index: 1001;
}

.surveySummaryList>li.open >.surveySummaryMenu {
  display: inherit;
  transition: all 1s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav surveySummaryList">
  <li>
    <a href="javascript:" data-bind="click: $root.surveyClicked">
      <span>Name</span>
      <button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>
    </a>
    <div class="surveySummaryMenu">
      <ul class="nav navbar">
        <li>
          <a href="javascript:" data-bind="click: $root.surveyClicked">
            <span> Sub Name </span>
          </a>
        </li>
      </ul>
    </div>
  </li>
</ul>

Note By the way, you can use $(this) instead of $(event.currentTarget) - I was changed the code so you can see it in the snippet.

Upvotes: 1

Related Questions