CODEWITHSUNDEEP
javascriptjquery
user2115227
user2115227

Reputation: 187

If all divs in section are hidden, hide the section

I am displaying divs, inside a section. There are multiple sections, and multiple child divs in each section. I dynamically check a dropdown field, to hide the child divs if they don't match the selection in the dropdown. This works great.

However, I now want to HIDE the entire section if all the divs in the section are hidden. Here's my code:

JS

if ($("section .listings").length === $("section .listing.h_group").length){
    $('section').hide();
}

HTML

<!-- this section should hide -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
    <div class="listings h_group></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group></div>
    <div class="listings></div>
    <div class="listings h_group></div>
    <div class="listings></div>
</section>

CSS

.h_group {
    display:none;
}

The code currently returns an error in console:

Uncaught TypeError: Cannot read property 'length' of null

It seems it's not finding the section, but I can't work out why. I also think if this did work, it would hide every section, but I only want it to hide the section that has all its divs hidden.

Upvotes: 1

Views: 103

Answers (2)

Nabil Shahid
Nabil Shahid

Reputation: 1458

I see that your html has syntax errors i.e. the class attributes don't have ending quotes. Try adding ending quotes to all class attributes and i hope it will work fine. For the HTML provided above, i have added ending quotes. See below:

<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
    <div class="listings h_group"></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
    <h2 class="group-name">Business Liner</h2>
    <div class="listings h_group"></div>
    <div class="listings"></div>
    <div class="listings h_group"></div>
    <div class="listings"></div>
</section>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337620

You've a couple of issues here. Firstly your class attribute in the HTML is missing the closing quotes, so it won't be recognised properly. You need to add those quotes in. Secondly the class is .listings, not .listing

Lastly, you need to check each section element individually, not all of them at the same time. As such you will need to loop through them. Then you use find() to determine if there are any :visible child .listing elements and toggle() the section depending on the result. Try this:

$('section').each(function() {
  $(this).toggle($(this).find('.listings:visible').length != 0);
});
.h_group {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- this section should hide -->
<section class="groups" style="clear:both;">
  <h2 class="group-name">Business Liner #1</h2>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
  <div class="listings h_group"></div>
</section>

<!-- This section should show -->
<section class="groups" style="clear:both;">
  <h2 class="group-name">Business Liner #2</h2>
  <div class="listings h_group"></div>
  <div class="listings"></div>
  <div class="listings h_group"></div>
  <div class="listings"></div>
</section>

Upvotes: 6

Related Questions