How to hide div after clicking on button?

Question

I would like to hide the div (which is "hide-div") as soon as the user cliks on the button when there is a navigation to the same page. Please help me on this. Thanks

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>

Please follow below link http://stackoverflow.com/questions/14648439/show-hide-div-on-button-click — Suman Singh, Sep 10 '15 at 12:21
In `setLocation` add `getElementById('dide-div').setAttribute('style','display:none;');` — nelek, Sep 10 '15 at 12:21
use localStorage to preserve the value and base on the value show/hide the div .. — Kishore Sahasranaman, Sep 10 '15 at 12:22

m4n0 · Answer 1 · 2015-09-10T12:38:27.437

Using Vanilla JavaScript. Although I recommend using event handler instead of inline JS, this is in view of your code.

Hide the element using style.display
You can redirect the page after hiding the button using window.location

function setLocation(loc) {
  document.getElementById('hide-div').style.display = 'none';
  window.location = loc;
}

<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('http://google.com')"><span>'Add to Cart'</span></button>
</div>

score 1 · Answer 2 · answered Sep 10 '15 at 12:26

1

You can do this by simple jquery

 <script>
jQuery(document).ready(function($) {
 $(".button").click(function(){
  $("div").fadeOut();
   });
});
</script>

answered Sep 10 '15 at 12:26

Herb Aderson

11
3

score 0 · Answer 3 · answered Sep 10 '15 at 12:21

0

Using jQuery you can do this in your onclick:

$('#hide-div').hide()

http://api.jquery.com/hide/

answered Sep 10 '15 at 12:21

Jonathan.Brink

23,757
20
73
115

score 0 · Answer 4 · answered Sep 10 '15 at 12:23

0

Use jQuery to hide it:

$('#hide-div button').click(function(){
    $(this).parent().hide();
});

answered Sep 10 '15 at 12:23

eshunsharma

171
9

score 0 · Answer 5 · answered Sep 10 '15 at 12:24

I assume you have jQuery added to your page already. So, something like this maybe:

 $('#hide-div .button').on('click', function() {
      $('#hide-div').hide();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hide-div">
   <button type="button" title="test" class="button btn-small" onclick="setLocation('abc.com');"><span>'Add to Cart'</span></button>
</div>

How to hide div after clicking on button?

5 Answers5