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>

Answer 1

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

1. Hide the element using style.display
2. 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>

Answer 2

You can do this by simple jquery

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

Answer 3

Using jQuery you can do this in your onclick:

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

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

Answer 4

Use jQuery to hide it:

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

Answer 5

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>