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


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    HTML/CSS showing buttons online and auto going to next line

    CSS- How to align background image over bottom border line? Jsfiddle included

    How can I delete these arrows?

    How to create some elegant shadows in CSS [closed]

    Button Built in CSS showing different font color in FF and Webkit

    How to pass array from method to property using PHP

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    How do I align my radio button with associated text?

    How can you remove the table-tags in CreateUserWizard control

    How to make emails responsive?

    how to apply transition effect in expand/collapse inside gridview rows

    how to remain the style of GUI component after disabling it in javafx?

    How to prevent css missing when exporting some html to excel file?

    Markup/Style best practices: How to efficiently distribute style rules over CSS classes?

    How to style placeholder text color for individual text field?

    How to fix flexbox position:fixed navbar JS/CSS bug

    How to force an update of a css selector inside context?

    how to add a fixed position Box on left side of each post [closed]

    How to select two different elements with an XPath query

    How to read this hover syntax in css?

    How to make a svg-filled background go animating by pure CSS?

    How to create two CSS transitions in parallel on nested elements

    How can I prevent a bookmark from changing style when moving the cursor over it?

    How can I center using percentages?

    navigation drop-down menu in wrapper not showing second level

    Portrait screen with 2 pages but only one of them should show

    How to prevent Ajax overflow/server crash? (Arduino/ESP8266 Environment)

    How to change the width of displayed text nested in a div?

    How can I apply jQuery .css style to descendant div [closed]

    How to use radio button checked or clicked property in my case