Collapse Bootstrap with History :)

One day I was working on a web project, with the collapse feature of bootstrap, I use this feature for product facets/category content. Since there were many collapses, five to be precise, there was a problem I encountered and this is the purpose of this script to work.

Purpose

Create a collapse hide/show based on the previous treatment.

Prerequire

• Bootstrap class collapse; aria-expanded for status collapse and data-bs-target for target id collapse
• Javascript; each, if statement, understanding in localStorage
• Jquery; selection and on click

Script

 let collFilter = $('.accordion-button');
 collFilter.each(function(){
     let collapse = ($(this).attr('data-bs-target'));
     let viewColl = $(this).attr('data-bs-target').replace('#',''); 

     //set first time check
      let cek = localStorage.getItem(viewColl);
      if (cek == 'false'){ 
        $(`#${viewColl}`).removeClass('show');
        $(`[data-bs-target="${collapse}"]`).attr('aria-expanded', 'false')
        $(`[data-bs-target="${collapse}"]`).addClass('collapsed')
      }

     //handle store status collapse
     $(`[data-bs-target="${collapse}"]`).on('click', function(){
        let stat = $(this).attr('aria-expanded')
        localStorage.setItem (viewColl, stat);
     });
 });

The principle of this script

Retrieve attribute data contained in data-bs-target then to do each to handle all collapses at once. After that use the localStore js function to save the collapse state contained in aria-expanded. When it is saved, window will check all localStore which is false, if false script will handle css to uncollapse (in my case default collapse is open/show)

Bonus

Make my collapse automatic close in mobile view; like in archive.org.

if (window.screen.width <= 768) {
  $('.accordion-collapse').removeClass('show');
}