jQuery .is(":visible") not Working

Question

SOLVED: Stupid Mistake - Had to replace the undefined element with "#sidebar"

I am having trouble using the is visible jquery function. This is my jQuery code.

$("#sidebar_toggle").click(function(){
      if ($(element).is(":visible")){
        $("#sidebar").hide();
      } else {
        $("#sidebar").show();
      }
    });

This is my html for the sidebar:

<!--sidebar start-->
  <aside>
  <!-- Start of Toggle -->
    <div id="sidebar"  class="nav-collapse sidebar">
      <!-- sidebar menu start-->
      <ul class="sidebar-menu" id="nav-accordion">

        <p class="centered"><a href="/user/<%=current_user.id%>"><img src=<%=Gravatar.new(current_user.email).image_url%> class="img-circle" width="60"></p>
        <h5 class="centered"><%=current_user.username%></h5></a>
        <hr>

          <!-- <li>
            <a class="active" href="/inbox">
              <i class="fa fa-inbox"></i>
              <span>Inbox</span>
            </a>
          </li>
          <li>
            <a href="/account">
              <i class="fa fa-pencil"></i>
              <span>Edit Account</span>
            </a>
          </li>
           -->


          <%if Company.where(:user_id => current_user.id).count<3 || current_user.premium%>
          <li>
            <a href="/companies/new">
              <i class="fa fa-star"></i>
              <span>Start a Startup</span>
            </a>
          </li>
          <%end%>

          <%if Company.where(:user_id => current_user.id).count>=1%>
          <li>
            <a href="/companies">
              <i class="fa fa-building"></i>
                <span>Companies</span>
            </a>
          </li>
          <%end%>

          <li>
            <a href="/market">
              <i class="fa fa-exchange"></i>
              <span>Global Market</span>
            </a>
          </li>

          <li>
            <a href="/investments">
              <i class="fa fa-line-chart"></i>
              <span>Invest</span>
            </a>
          </li>

          <li>
            <a href="/users-companies">
              <i class="fa fa-search"></i>
              <span>Users & Companies</span>
            </a>
          </li>
          <li>
            <a href="/request-help">
              <i class="fa fa-question"></i>
              <span>Request & Help</span>
            </a>
          </li>

    </ul>
    <!-- sidebar menu end-->
  </div>
</aside>
<!--sidebar end -->

It is when I add if ($(element).is(":visible")){... that it stops working to click on the sidebar_toggle. Even if I add $("#sidebar").hide(); prior to this code it doesn't work.

Strangely though it works on jsfiddle but not on chrome when I am trying to test it with all my website code.

I have also tryed this:

$("#sidebar_toggle").click(function(){
      if ($(element).hasClass( "hidden" )){
        $("#sidebar").show();
        $("#sidebar").removeClass("hidden");
      } else {
        $("#sidebar").hide();
        $("#sidebar").addClass("hidden");
      }
    });

But it doesn't work either...

possible duplicate of [jquery .is(":visible") not working in Chrome](http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome) — Steyn, Aug 27 '15 at 21:12
Why do you both show/hide and toggle the classname? I mean if its hidden it doesn't matter what it looks like? — Shanimal, Aug 27 '15 at 21:22
Yep had to replace element with "#sidebar"... Stupid mistake. — Pabi, Aug 27 '15 at 21:22

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

It's known that .is(":visible") does not work correctly with some elements in Chrome. Maybe have a look at this thread jQuery `.is(":visible")` not working in Chrome

edited May 23 '17 at 11:58

Community

1
1

answered Aug 27 '15 at 21:13

Bobface

2,782
4
24
61

I have edited my post with something else I have tryed but that doesn't work either. Is my if else syntax wrong? I do not know why that would not work... – Pabi Aug 27 '15 at 21:15
"The solution is to add a display style, like "block" or "inline-block" to make it work." (from the link I posted). Have you tried this too? – Bobface Aug 27 '15 at 21:16
Added style="display: block;" to the sidebar div, still doesn't work. – Pabi Aug 27 '15 at 21:19
Do you use the newest version of jQuery (jquery-latest)? And you could use the Inspector inside Chrome to see if `style="display:block;"` gets overwritten by something. – Bobface Aug 27 '15 at 21:23
I figured it out. The problem was I was looking is element was hidden, but element was never defined. I had to use "#sidebar" instead. – Pabi Aug 27 '15 at 21:24

score 2 · Answer 2 · answered Aug 27 '15 at 21:18

2

Instead of doing the checking with .is(":visisble"), you could just use .toggle().

This should work, assuming you have element defined somewhere.

$("#sidebar_toggle").click(function(){
    $(element).toggle();
});

answered Aug 27 '15 at 21:18

Andrew Mairose

10,615
12
60
102

I would do that, the problem is that I also need to change other things. I need to change the css of my main-content div to move to the left to occupy the space left by the hidden sidebar when toggled and then back. – Pabi Aug 27 '15 at 21:20

score 1 · Answer 3 · answered Aug 27 '15 at 22:52

You can add/remove a class and check for that as well.

$("#sidebar_toggle").click(function(){
      if ($(element).hasClass("visible")){
        $("#sidebar").hide();
        $(element).removeClass('visible');
      } else {
        $("#sidebar").show();
        $(element).addClass('visible');
      }
    });

It'd also be better to just use the class to do the hiding/showing with display none/block.

jQuery .is(":visible") not Working

3 Answers3