Open A Specific Accordion Panel With An External Anchor Link

I have a bootstrap accordion setup and working fine. I need to have links on external pages which will: A) Take you to the specified panel within the accordion B) Open the specif

Solution 1:

You can use url parameters and do it.

Sample links: https://output.jsbin.com/talojodupa/1?panel=collapseOnehttps://output.jsbin.com/talojodupa/1?panel=collapseTwo

jsbin link: https://jsbin.com/talojodupa/1/edit?html,js,output

(function() {
    var searchTerm, panelContainerId;
    // Create a new contains that is case insensitive
    $.expr[':'].containsCaseInsensitive = function(n, i, m) {
        returnjQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#accordion_search_bar').on('change keyup paste click', function() {
        searchTerm = $(this).val();
        $('#accordion > .panel').each(function() {
            panelContainerId = '#' + $(this).attr('id');
            $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
            $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
        });
    });
  
  /* Function to get url parameter based on param name */functiongetUrlParameter(key) {
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = newRegExp("[\\?&]" + key + "=([^&#]*)");
    var results = regex.exec(window.location.href);
    if (results == null)
      return"";
    elsereturnunescape(results[1]).replace(/<script.*>.*<\/script>/g, "");
  }
  
  var panelId = getUrlParameter('panel');
  if(panelId){
    var $panel = $('#'+panelId);
    $panel.addClass('in');

    $('html,body').animate({
       scrollTop: $panel.offset().top},
    'slow');
  }
  
}());

Solution 2:

You can try this:

JScode: 

      $(function () {
            // check if there is a hash in the urlif (window.location.hash != '') {
                // show the panel based on the hash now.
                $(window.location.hash + '.collapse').collapse('show');
            }

        });