1

I am working on a FAQ/Helpcenter page for my company. One of the last things we are trying to accomplish is a "top questions section" where users can just click on the question and it opens a link to the page the question is on and the accordion is open to the correct section to display the answer. 

$(document).ready(function() {
function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active')
  .find('img').attr('src', 'http://www.scrubsandbeyond.com/app_themes/scrubsandbeyond/graphics/right.png');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

$('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if($(this).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        $(this).find('img').attr('src', 'http://www.scrubsandbeyond.com/app_themes/scrubsandbeyond/graphics/down.png');
        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});


});

This is the jQuery used for the accordion, and the full working code is here http://jsfiddle.net/gvolkerding/ancu6fgu/3/ One example would be, if we made one of the top questions "How do I sign up to receive promotional emails?", then the page would need to load with accordion section 4 open. We have 8 separate pages with questions on them, so ideally all I would have to do is put in a link with a query after it(or any other way that you could think of) to point to the correct page/question. I really appreciate any help that is offered, thanks everyone.

idontwantnoscrubs
  • 225
  • 2
  • 14

2 Answers2

1

In the fiddle you use ID's (for example accordion-3) to identify, display and hide the accordion sections. That ID you can also use as an anchor for any link to your faq-pages. Put the following code at the end of the document.ready function:

// current location has anchor
if(location.hash) {
    // find accordion href ending with that anchor
    // and trigger a click
    $(".accordion-section-title[href$="+location.hash+"]").trigger('click');
}

and the link to the page would be somethink like /path/to/faq.html#accordion-3. Where accordion-3 is the anchor / element-ID you'll want to open. Be aware that the page also scrolls to the position of the element with the corresponding ID (accordion-3). To avoid this, you'll either have to scroll to top after trigger the click, or you'll use a GET-parameter instead of location hash.

Update: including a page scrolling to the question

Due the comment below, here a version including a solution to scroll to the active question.

if(location.hash) {
    // the selector 
    var currentTarget = $(".accordion-section-title[href$="+location.hash+"]"),
        offset = {top: 0, left: 0};
    // in case we have a hit...
    if(currentTarget.length) {
        // trigger the click
        currentTarget.trigger('click');

        // get current offset (relative to document, contains left and top)
        // since the selector is the question (not the answer with the id)
        // this will show the question right on top
        offset = currentTarget.offset();

        // just in case you'll want to add some extra space do it like this:
        // offset.top -= 10;

        // and let the page scroll to this position
        $('html, body').animate({
            scrollTop: offset.top,
            scrollLeft: offset.left
        });
    }       

}

The updated fiddle is here.

axel.michel
  • 5,764
  • 1
  • 15
  • 25
  • This works perfectly other than what you said about scrolling to the question. Could we have it scroll down to the question, but then maybe scroll back maybe...65px. Just so the title of the question is visible? – idontwantnoscrubs Jun 08 '15 at 16:12
  • @idontwantnoscrubs i have updated the answer and the related fiddle. – axel.michel Jun 08 '15 at 16:38
  • Awesome thank you, I dont know if there was an error in translation or what happened but when I used the code from the fiddle it did not work at all, but when I copied the code above it worked perfectly! Thank you so much! – idontwantnoscrubs Jun 08 '15 at 16:52
0

One way you can do that is to pass the question index as a query parameter. Then you would get the parameter value in your code, say, qIndex and then add the following:

//get question index passed via query parameter
var qIndex = .....

$('.accordion-section-title').click(function(e) {
    ...
})
.eq( qIndex ).trigger('click'); //<<<------------

DEMO

PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • 1
    I should have mentioned that I am very new to jQuery and I this code has been pieced toghether from the internet and one other stackoverflow question. So excuse me if I sound dumb but I have no idea what to do with this. – idontwantnoscrubs Jun 08 '15 at 15:40
  • I'd be happy to walk you through .... but you would have to be a bit more specific. – PeterKA Jun 08 '15 at 15:44
  • Ok so just for this first example. Say "How do I sign up for promotional emails?" is one of our top questions. This link would be displayed on our top questions page, but the answer would be on the pages with the accordions. So for this example, it would need to load the page page with "#accordion-4" open. The link for the page that the question is on is http://www.scrubsandbeyond.com/help-1.aspx. So I would assume the link would look something like http://www.scrubsandbeyond.com/help-1.aspx#accordion- – idontwantnoscrubs Jun 08 '15 at 16:04