Jump to content

Hide entire SqSp col when contents are hidden too

Recommended Posts

Site URL: https://acsolutions.squarespace.com/

Hi,

I'm making a product page with custom filters. Each product is a code block, and when the filter is applied the code block is set to 

display: none;

The columns still take up space even when all products in that column are hidden. How can I automatically hide empty columns so the remaining products are always aligned left?

Here is what I've tried so far with no success:

$(document).ready(function()
    {
     var colHeight = $('.col.sqs-col-4.span-4').height();
     console.log(colHeight);     
     if(colHeight>=38) {
         $('col.sqs-col-4.span-4').show();
     }
     else {
         $('col.sqs-col-4.span-4').hide();
     }
});

 

Here is a sample of the JS and jQuery used in filtering:

$(document).ready(function() {
    $(".table-of-contents.brand li").click(function () {
        $(".table-of-contents.brand a").removeClass("active");
        $(this).find("a").addClass("active"); 
    });
});

$(document).ready(function() {
    $(".table-of-contents.sector li").click(function () {
        $(".table-of-contents.sector a").removeClass("active");
        $(this).find("a").addClass("active");
    });
});

$('#baltimore').click(function() {
        $('.baltimore').show();
        $('.alfa').hide();
        $('.airedale').hide();
        $('.danfoss').hide();
        $('.thermocold').hide();    
    });

This is the site, and the password is 

acsolutions

Thank you!

Link to comment
  • Replies 1
  • Views 163
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.