CODEWITHSUNDEEP
phpjquery
Nick Balistreri
Nick Balistreri

Reputation: 131

hide div if there is no paragraphs

So I have several divs that i assigned a class to. Each div has a header. The contents underneath each header are dynamically generated via php. Certain times of the year these divs contain no information but the header still displays. I want to hide the divs that do not have any paragraphs inside of them I cannot quite get them to work and I have a feeling it has to do with the paragraphs being generated by php.

EXAMPLE:

<div class="technology_connected article_headers"> 
  <h3>TECHNOLOGY CONNECTED</h3> 
  <?php echo $tools->article_formatter($articles, 'Technology Connected'); ?>
</div>

Here is my Jquery code. 

$(document).ready(function() {
    $(".article_headers").each(function() {
      if ($(this).find("p").length > 0) {
         $('.article_headers').show();
       }
    });

});

Upvotes: 0

Views: 47

Answers (2)

War10ck
War10ck

Reputation: 12508

As noted by @JasonP above, this really should be done server side. However, since you do want it done server side, you can simplify the process greatly. Generate the data server side as you're doing. Make sure all <div> tags are visible. Then in your JavaScript use the following selector:

// Shorthand for $(document).ready(function() { ... });
$(function () {
    $('.article-headers:not(:has(p))').hide();
});

The selector above targets all elements with the class .article-headers that do not contain a <p> tag and hides them.

JSFiddle demoing the above as a toggle button to show or hide the no paragraph sections.

Upvotes: 0

Kiran
Kiran

Reputation: 20313

Try this:

$(document).ready(function() {
    $(".article_headers").each(function() {
      if ($(this).find("p").length > 0) {
         $(this).show();
       }else{
         $(this).hide();
       }
    });
});

DEMO

Upvotes: 1

Related Questions