Deep link and open accordion element
I am trying to deeply link the code below, so I can link the accoridon element directly and open it when I enter the correct address in the address bar:
Here's my working accordion WITHOUT deep linking:
$('.responsive-accordion').each(function() {
// Set Expand/Collapse Icons
$('.responsive-accordion-minus', this).hide();
// Hide panels
$('.responsive-accordion-panel', this).hide();
// Bind the click event handler
$('.responsive-accordion-head', this).click(function(e) {
// Get elements
var thisAccordion = $(this).parent().parent(),
thisHead = $(this),
thisPlus = thisHead.find('.responsive-accordion-plus'),
thisMinus = thisHead.find('.responsive-accordion-minus'),
thisPanel = thisHead.siblings('.responsive-accordion-panel');
// Reset all plus/mins symbols on all headers
thisAccordion.find('.responsive-accordion-plus').show();
thisAccordion.find('.responsive-accordion-minus').hide();
// Reset all head/panels active statuses except for current
thisAccordion.find('.responsive-accordion-head').not(this).removeClass('active');
thisAccordion.find('.responsive-accordion-panel').not(this).removeClass('active').slideUp();
// Toggle current head/panel active statuses
if (thisHead.hasClass('active')) {
thisHead.removeClass('active');
thisPlus.show();
thisMinus.hide();
thisPanel.removeClass('active').slideUp();
} else {
thisHead.addClass('active');
thisPlus.hide();
thisMinus.show();
thisPanel.addClass('active').slideDown();
}
});
});
I'm trying to integrate this piece of code to initiate deep linking, but it just doesn't work:
var active = 1;
var hash = document.location.hash;
if (hash.length > 0) {
var section = $("#deep-link").find("> li" + hash);
if (section.length) {
active = section.index();
}
thisPanel.addClass('active').slideDown();
}
HTML is a simple UL:
<ul class="responsive-accordion responsive-accordion-default bm-larger" id="deep-link">
<li id="item-0">
<div class="responsive-accordion-head">
Heading Here
</div>
<div class="responsive-accordion-panel">
Content here
</div>
</li>
</ul>
+3
source to share
1 answer
I think your function does not have thisPanel variable set. This should work for you.
var active = 1;
var hash = document.location.hash;
if (hash.length > 0) {
var section = $("#deep-link").children("li" + hash);
var thisPanel = section.children(".responsive-accordion-panel");
if (section.length) {
active = section.index();
}
thisPanel.addClass('active').slideDown();
}
0
source to share