hide .card-body when childrens has "display:none"

Question

I have two cards with collapse.

When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.

the .card-body is the .parent() of $('#Categories > .acc-row')

For now I'm only able to either hide all card-bodies,none of them or just the first one. Below is a snippet to my whole code. And here is a link to a fiddle

Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).

var toHide = $('div.acc-row');
   if(toHide.filter(':visible').length == 0){
     $('.collapse').collapse("hide");
   }

Another

if ($('#Categories > .acc-row').is(":visible")) {
           $('#Categories > .acc-row').parent().show();
            }else{
           $('#Categories > .acc-row').parent().hide();
           }

And another

 $('#Categories > .acc-row').each(function(){
     if ($(this).is(":visible")) {
        $(this).parent().show();
         }else{
        $(this).parent().hide();
        } 
      });

And here is my latest approach

   if ($('#Categories > .acc-row:hidden')) {
             $('#Categories > .acc-row').parent().show();
           }else{
             $('#Categories > .acc-row').parent().hide();
           }

$(document).ready(function(){
  $("#alphf .acco").each(function(){
    $(this).on("click", function(){
       $('.collapse').collapse("show");

        var cat = $(this).data('cat-type');
        var nam = $(this).data('cat-name');

       if (cat != 0) {
          $('#Categories > .acc-row').hide();
          //$('#Categories > .acc-row:hidden').parent().hide();
           $('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
           }

            //var toHide = $('div.acc-row');
            // if(toHide.filter(':visible').length == 0){
            //   $('.collapse').collapse("hide");
            //  }

             // if ($('#Categories > .acc-row').is(":visible")) {
             //  $('#Categories > .acc-row').parent().show();
             // }else{
             //      $('#Categories > .acc-row').parent().hide();
             // }

               // $('#Categories > .acc-row').each(function(){
               //     if ($(this).is(":visible")) {
               //       $(this).parent().show();
               //         }else{
               //       $(this).parent().hide();
               //       }
               //
               // });

               if ($('#Categories > .acc-row:hidden')) {
                 $('#Categories > .acc-row').parent().show();
               }else{
                 $('#Categories > .acc-row').parent().hide();
               }

    });
  });



  $("#search").on("keyup", function(e) {
     //$('button').removeClass('collapsed');
      $('#collapseOne, #collapseTwo').removeClass('collapse');
      var value = $(this).val().toLowerCase();
      $('.acc-row').filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      });

    });


});








  
    

  
  
    

      
      
        
              
       





    Accordion filter
  
  




  

    
    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    R
    S
    T
    U
    V
    X
    Y
 		Z
    

  





  Search: 


  
    
      
    
  

  
    
        
      
        Aston
      
      
        Tracker
      
      
        aston@some.com 
      
      
        Phone:: 1234567890
      
    
    
    
      Arleen
    
    
      Specialist
    
    
      arleen@firm.is
    
    
      phone 1239484999
    
  

    
  
  John
  
  
    Registar
  
  
    jj@arn.com 
  
  
     1234565469
  

  

Kyle



  Driver



  kdrive@company.com



    1234567890




    
  





  
    
      
    
  
  
  
    
        
      
      Allan
      
      
        Specialist
      
      
        allan@lsome.com 
      
      
        Phone: 1234567890
      
    

      
    
      Brad
    
    
      IT-Guy
    
    
      brad@some.com 
    
    
       1234567890 
    
  

  
  
    Brent
  
  
    Specialist
  
  
    brent@some.com 
  
  
    123456789
  


  

  Evan


  Chef


  evan@some.com 


  123456789

Henfs · Accepted Answer

You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.

The whole code:

$(document).ready(function() {
  $("#alphf .acco").each(function() {

    $(this).on("click", function() {
      $('.collapse').collapse("show");

      var cat = $(this).data('cat-type');
      var nam = $(this).data('cat-name');

      // modified from here down
      if (cat != 0) {
        $('.card-body').each(function(i, cardBody) {
          var hidebody = true;
          ($(cardBody.children)).each(function(f, accRow) {
            $(accRow).hide();
            if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
              hidebody = false;
              $(accRow).show();
            }
          });
          if (hidebody) {
            $(cardBody).hide();
          } else {
            $(cardBody).show();
          }
        });
      }
      // modified from here up

    });

  });

  $("#search").on("keyup", function(e) {
    $('#collapseOne, #collapseTwo').removeClass('collapse');
    var value = $(this).val().toLowerCase();
    $('.acc-row').filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

});

In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.

hide .card-body when childrens has "display:none"

Answers (1)

Related Questions

hide .card-body when childrens has &quot;display:none&quot;

Answers (1)

Related Questions

hide .card-body when childrens has "display:none"