CODEWITHSUNDEEP
jquery
Jay McNaught
Jay McNaught

Reputation: 31

Jquery show/hide button not working

<div class="row">
  <div class="large-24 columns row2 darkgreybg" id="ricontainer">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

  $(function() {
    $("#ributton").click(function () {
        // Hide it but only if not hidden - hide
        $('#ricontainer:visible').hide();

        // Later in the script - Show it but only If it's not visible.  
        $('#ricontainer:hidden').show();
    });
  });

No idea why this isn't working, any ideas? I just want it so that I have a container that if visible, when a button is clicked it will hide it. Or, if it is already hidden, when the button is clicked it will show it.

Thanks in advance.

Upvotes: 0

Views: 5507

Answers (4)

Shomz
Shomz

Reputation: 37701

You code will always show the button, here is why:

Button initially hidden: 

$('#ricontainer:visible').hide(); // nothing happens, button not selected
                                  // because the selector matches nothing

$('#ricontainer:hidden').show();  // hidden button found and shown, all good

Button initally shown: 

$('#ricontainer:visible').hide(); // selector matched, button found
                                  // now hiding the button

$('#ricontainer:hidden').show();  // button hidden from the previous line is found
                                  // so the selector matched and is now showing the button
                                  // and that's the PROBLEM

The other answers already suggest ways how to fix it, this is just showing you why it doesn't work as you expect. So, either fetch the state of the button at the beginning and use if/else to change its state, or simply toggle it.

Upvotes: 0

horro
horro

Reputation: 1309

You can do it with JavaScript like:

...
<div class="large-24 columns row2 darkgreybg" id="ricontainer" onclick="controlButton()">
...

function controlButton() {
      var div = document.getElementById("ricontainer");
      if (div.style.display === "none") {
         div.style.display = "block";
      } else {
         div.style.display = "none";
      }
}

Upvotes: 0

Rob
Rob

Reputation: 10248

As per Jai's suggestion you could use .toggle() but I always find toggling ends in tears.

$(function() {
    $("#ributton").click(function () {

        if($('#ricontainer').is(':visible'))
        {
           // Hide it but only if not hidden - hide
           $('#ricontainer').hide();
        }
        else
        {
           $('#ricontainer').show();
        }
    });
  });

You should also probably be using "on" rather than "click" as I believe this is the recommended approach as of version 1.7 of jQuery:

$('#ributton').on('click', function(){});

Upvotes: 0

Jai
Jai

Reputation: 74738

You can use .toggle() instead:

  $(function() {
    $("#ributton").click(function () {
        $('#ricontainer').toggle(); // toggles between show/hide
    });
  });

Upvotes: 1

Related Questions