Search code examples
jquerytwitter-bootstraptwitter-bootstrap-3menubar

Expand jquery bootstrap panel based on window url

I'm trying to have have a bootstrap sidebar panel list that collapses/expands based on the current page url similar to this picture.

Bootstrap Expand Collapse

So in the picture above if any of the links under Programs & Resources are the current URL then expand the Programs & Resources tab and highlight the link of the current URL. The same goes for other links under Training, Certification, etc...

Here is what I have so far. The tabs work fine and the current page gets highlighted, but I cant figure out how to open the parent tab on page load to show this panel. I think I'm using .parents or .collapse improperly.

console.log(window.location.pathname);
jQuery('.list-group-item a[href$="' + window.location.pathname +    '"]').addClass("active").parents('.panel .panel-heading a').collapse('show');

https://jsfiddle.net/BVmUL/1325/

Solution

  • Just change something:

    jQuery('.list-group-item a[href$="' + window.location.pathname + '"]').addClass("active").parents('.collapse ').collapse('show');