CODEWITHSUNDEEP
javascriptjqueryhideshowjquery-animate
user401214
user401214

Reputation: 23

elements within a hidden element are not hidden

In trying to build a page where I can filter the types of jobs and the offices using the hide/show function, I find that if an element is hidden, then an element underneath the element is "told" to hide, it doesn't actually hide. In other words, hide only works if the actual element is shown.

Here is the code, to duplicate, Hide office 2, then hide developers, then show office 2 again. The developers (which "should" be hidden) display within office 2.

Is there a way around this? It would seem jquery would hide the "sub" elements as well, but it doesn't.

<input  type="checkbox" id=office1 name="test"  class="link1" />Office 1<BR>
<input  type="checkbox" name="office2"  checked='true' class="link2"/>Office 2<BR>
<input  type="checkbox" name="office3"  checked='true' class="link3" />Office 3<BR>
<input  type="checkbox" name="developer"  checked='true' class="link4" />Developer<BR>
<input  type="checkbox" name="receptionist"   checked='true' class="link5" />Receptionist<BR>
<input  type="checkbox" name="manager"   checked='true' class="link6" />Manager<BR>
<table border='1'>
    <tr>
        <td class="toggle-item-link1"><B>Office 1</B><HR>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        </td>
    </tr>
    <tr >
        <td class="toggle-item-link2"><B>Office 2</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link6"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>
    <tr>
        <td class="toggle-item-link3"><B>Office 3</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>

        <td>
        </td>
    </tr>
</table>
<script>
$(document).ready(function() {

    $('[class^=link]').click(function() {
        if ($(this).attr("checked")) {
            var $this = $(this);
            var x = $this.attr("className");
            //when 'checked'

            $('.toggle-item-' + x).show(1000);

            return;
        }
        //when 'unchecked'
        var $this = $(this);
        var x = $this.attr("className");

        $('.toggle-item-' + x).hide(1000);
    });

});
</script>

Upvotes: 2

Views: 320

Answers (3)

Mahn
Mahn

Reputation: 16585

Here's a cleaner and simpler solution:

$("#randomdiv").hide(1000, function() { $(this).css("display", "none"); });

The callback of hide/show in jQuery does fire even if the function itself didn't do its thing due to the parent elements. Using the above method with jQuery, the elements will hide regardless if they are in a hidden parent element or not, while also performing the usual smooth transition if they are shown.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630349

Since .hide() with an animation speed will only run on visible elements, you can add a case in there for hidden ones as well, like this (a few more optimizations here, just cutting down on code):

$('[class^=link]').click(function()  {
    var x =  $(this).attr("className");
    if (this.checked) {
        $('.toggle-item-'  + x).show(1000);
    } else {
        $('.toggle-item-'  + x).hide(1000).filter(':hidden').hide();
    }
});

You can try out a demo here. We're just accounting for the already :hidden elements that won't animate and skipping to them doing a display: none; by calling .hide() without an animation speed.

Upvotes: 3

Gert Grenander
Gert Grenander

Reputation: 17084

In addition to the hide()/show(), use a class named hidden, with the CSS:

.hidden {
  display: none;
}

When you hide the item, you also add the class hidden. And when you show it, you also remove hidden.

Upvotes: 1

Related Questions