Toggle element in page when clicking a hash link

Question

I have some jQuery that converts a definition list into an expandable/collapsible list of FAQs.

// Toggle expand/collapse
$('.faq a').click(function () {
    $(this).toggleClass('active').next().slideToggle('fast');
});

var hash = document.URL.substr(document.URL.indexOf('#'));
$(hash).addClass('active').next().show();
$(hash).parent().parent().prev('a').addClass('active').next().show();

I have several links to FAQs throughout the site and clicking on them sends you to the FAQ page and expands the relevant question, the problem is that some of the FAQ answers have links to other questions and while the hash link jumps to the relevant question it doesn't expand the answer.

Is this because the jQuery is in an $(document).ready(function() so the code only activates after the page is reloaded? Do I need to trigger a reload?

CHeers

See my jsFiddle for full code.

Answer 1

Clicking a hash link doesn't reload the page, it just navigates within the page.

You can bind a click event to the hash links that does the work for you. for example:

$('ul li a').click(function() {
   $($(this).attr('href')).toggleClass('active').next().slideToggle('fast');
});

Answer 2

Try

//for the demo in fiddle you need to use the selector ul li a
$('.faq dd a[href^="#"]').click(function(){
    $($(this).attr('href')).trigger('click')
})

Demo: Fiddle