Recursively Expand Bootstrap 4 Sidebar To Previous State When Hitting Back In Browser

Question

The below HTML, CSS, Bootstrap 4 code produces an accordion-style expandable/collapsible sidebar menu that looks like this:

What I'm trying to do

Either via Bootstrap 4 OR jQuery OR straight Javascript...

If I click the "Push Mowers" link and then click back, I want the sidebar to expand all parent nodes above showing the "Push Mowers" item again. This means the sidebar would need to expand (show): Gardening, Equipment and Lawn Mowers in-order to show the previously-clicked item "Push Mowers".

My first attempt to solve this is to add a URL Fragment to the last item clicked using Javascript:

Next, I'm not sure how to proceed. I started down this path but this looks horribly and inefficient especially since I'm using Bootstrap 4.

// probably a terrible idea

I'm really unclear how to recursively expand all parent categories above a given node.

The Reproducible HTML, CSS, Bootstrap:










  
    
      
        
          Gardening 
          
            Lawn Chemicals 
            
              Moss Control
            
            Equipment 
            

              Lawn Mowers 
              
                Push Mowers
                Riding Mowers
            
              Weed Wackers

bigless · Accepted Answer

You need only to traverse DOM up and it is quite easy with jQuery:

// just mocking history back
var historyHashArray = [
  "push-mowers",
  "equipment",
  "gardening",
  "moss-control",
];

var currentHistoryIndex = 0;

// get reverse order of $ elements
jQuery.fn.reverse = [].reverse;

function expandTree() {
  if (currentHistoryIndex < historyHashArray.length) {
    console.log(historyHashArray[currentHistoryIndex]);
    $('.collapse').removeClass('show'); // resets
    $('#' + historyHashArray[currentHistoryIndex])
      .parents('.collapse')
      .reverse()
      .collapse('show');
    currentHistoryIndex++;
  }
}

document.getElementById('back-btn').onclick = expandTree;












  
    
      
        
          Gardening 
          
            Lawn Chemicals 
            
              Moss Control
            
            Equipment 
            

              Lawn Mowers 
              
                Push Mowers
                Riding Mowers
            
              Weed Wackers

Update: So with your click event, it should be something like

$(document).ready(function() {
  if (window.location.hash) {
    var id = window.location.hash; // luckily it already includes #
    $(id).parents('.collapse').collapse('show');
  }
});

Recursively Expand Bootstrap 4 Sidebar To Previous State When Hitting Back In Browser

Answers (1)

Related Questions