Show a class Over button click using Jquery

I want to show a div on button click and after that it should get closed on another button click. Right now I am able to toggle between hiding and showing a div. But instead I want it not to toggle but remain there itself until i click close button.I am new to J Query. Can somebody please help

$('.trigger, .slider').click(function() {
  $('.slider').toggleClass('close');
});
.slider {
  position: absolute;
  width: 1000px;
  height: 100vh;
  margin-top: -304px;
  overflow: hidden;
  background-color: aliceblue;
  transition: all 1s;
}

.slider.close {
  top: 100vh;
  height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-for-table slider close">
  <div id="home">
    <div class="container-fluid">
      <table class="table table-striped table-hover">
        <tr>
          <td class="field-label col-xs-3 active" style="width: 20%;">
            <label>College</label>
          </td>
          <td class="col-md-3 oc pic">
            Value 1
          </td>
          <td class="col-md-3 oc pic">
            Value 2
          </td>
          <td class="col-md-3 oc pic">
            Value 3
          </td>
          <td class="col-md-3 oc pic">
            Value 4
          </td>
        </tr>
        <tr>
          <td class="field-label col-xs-3 active">
            <label>Location</label>
          </td>
          <td class="col-md-3 oc">
            Value 1
          </td>
          <td class="col-md-3 oc">
            Value 2
          </td>
          <td class="col-md-3 oc">
            Value 3
          </td>
          <td class="col-md-3 oc">
            Value 4
          </td>
        </tr>
      </table>

    </div>
  </div>

</div>

With this Iam able to bring a div up from hidden.But whenever i click on any part of slider div,it gets closed due to toggleClass I just want to show the div and let it remain there until i click close button Thanks in adavance.

javascript jquery html css
kishan patel

Answers 1

Submit Answer
  • bhargav

    Instead of using toggle, simply set a different event handler to each of the different buttons.

    Each button has a different and specific action, so they only need to either add a class, or remove a class.

    $('.trigger.open').on('click', function() {
    $('.slider').removeClass('close');
});
$('.trigger.close').on('click', function() {
    $('.slider').addClass('close');
});

    Also, you will need to set the proper classes to the different buttons so the JS code will be able to select them properly.

    <button type="button" class="trigger open">Click to open</button>
<button type="button" class="trigger close">Click to close</button>

Related Articles