CODEWITHSUNDEEP
javascriptjquerycss
Varun B. Krishnan
Varun B. Krishnan

Reputation: 27

Hide div blocks if child p tags are empty

I'm working on a vertical timeline and I have three categories of events: national, international and obituaries, each of which is specified by classes of the same name. The structure of a div block is as follows:

<div class="cd-timeline__block js-cd-block">
<div class="cd-timeline__img cd-timeline__img--location js-cd-img"> 
<img src="img/cd-icon-location.svg" alt="Location">
</div>
<div class="cd-timeline__content js-cd-content">
<p class="National List">The Election Commission recommends to the President the disqualification of 20 AAP MLAs in Delhi</p>           
<span class="cd-timeline__date">Jan. 19</span></div>

If the user selects 'National' events in a dropdown (which is part of the UI), a Javascript functions automatically hides the other two category events like this: 

$('#newscategory').on('change', function(){
        if(this.value=="Nat"){
            $('.National').show();
            $('.International').hide();
            $('.Obituaries').hide();
        }
});

However, if there are no 'National' events present on a particular date, the container surrounding the p tags does not get hidden. I want the timeline to skip that date altogether, which means I want to hide the parent div with class="cd-timeline__block js-cd-block" if the p tags are hidden. How can I achieve this? Another problem is that there are hundreds of events on the page.

An example of the code can be found here

Upvotes: 0

Views: 74

Answers (2)

Jeto
Jeto

Reputation: 14927

Could make use of .toggle, Array.some and :empty:

$(function() {
  // For each div element
  $('div').each(function () {
    // Show it only if one of its children paragraphs is non-empty
    $(this).toggle($(this).find('p').toArray().some(function (p) {
      return !$(p).is(':empty');
    }));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  div with some non empty paragraphs
  <p>non empty</p>
  <p></p>
  <p>non empty</p>
</div>

<div>
  div with only empty paragraphs
  <p></p>
  <p></p>
  <p></p>
</div>

In your case, replace $('div') with a proper (more specific) selector.

Upvotes: 1

Nikola Kirincic
Nikola Kirincic

Reputation: 3757

Iterate through parent blocks using .each, and check if its child paragraph element has any content, if so leave it, if no content within child paragraph elements, hide it. 

    $('.cd-timeline__block.js-cd-block').each(function () {

        var showElement = false;

        $(this).find('p').each(function () {
            var len = $.trim($(this).html()).length;

            if (len > 0) {
                showElement = true;
            }
        });

        if (showElement === false) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });

This way, parent block would appear if at least one p child element has any content available.

Upvotes: 1

Related Questions