Collection Sidebar: Collapse and expand filter options

This customization allows you to add expand and collapse controls to your Collection Sidebar filters. 

Example desktop:

The filters group stays open by default on page load. This helps your customers find the filter options without having to scroll far down the page to find them. 

The customization is especially helpful for mobile customers as they can easily access the filter options.

Example mobile:

How to:

Note:
This tutorial if for Pipeline 4.3 and higher only. Previous versions of Pipeline will not work with this customization. Pipeline 4.3 introduced tag filter groups which uses new collection sidebar features and layout.
Check your theme version

There are two main steps involved. Complete both steps for this customization.

Before beginning - Create a duplicate of your theme. This is essential as we will be adding Javascript to your theme. If there's an error, your shop will not function correctly. A duplicate/backup is necessary when performing code modifications like this. 

After making a duplicate, rename the backup theme to easily identify it as a backup before this customization. If you're working on a draft theme, you can use the Actions menu for that theme in your list. 

1

Add Javascript to liquid file

Choose Edit Code from your Theme Editor:

From the Snippets folder, open collection-sidebar.liquid:

At the very bottom of the file, add the following code:

<script>
// code for collapse and expand tutorial
$(document).ready(function() {
  $('.collection-nav').hide();
  $('.template-collection .sidebar__heading').click(function(){
    $(this).toggleClass( "active" );
    $(this).next().toggle(100);
  });
    $( ".sidebar__heading:contains('{{ "collections.sidebar.tags" | t }}')" ).addClass( "active" );  
    $( ".sidebar__heading:contains('{{ "collections.sidebar.tags" | t }}')" ).next().toggle();
});  
</script>

Example:

Save the file:

2

Add CSS style code to theme CSS file

From the Assets folder, open theme.scss.liquid:

Add the following code to the very bottom of the file:

/* -- Start Pipeline override code for collection sidebar expand and collapse tutorial -- */
.template-collection .sidebar__heading:hover{cursor: pointer;}
.template-collection .sidebar__heading:after {
    content: "\2796";
    font-size: 13px;
    float: right;
    margin-right: 7px;
}

.template-collection .sidebar__heading.active:after {
    content: '\02795';
}


.template-collection .sidebar__heading
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
/* - end - */

Example:

Save the file:

Additional Notes:

To change the label of your Filters, you can modify the text in the Language Editor:

Use the filter bar and search for "Filters", then modify the text for Tags:

That will change the label for this section: