Как загрузить страницу с открытым аккордеоном по внешней ссылке

Я работаю над страницей часто задаваемых вопросов / справочного центра для моей компании. Одна из последних вещей, которую мы пытаемся выполнить, это "раздел главных вопросов", где пользователи могут просто щелкнуть по вопросу, и он открывает ссылку на страницу, на которой находится вопрос, и аккордеон открыт для правильного раздела, чтобы отобразить ответ.,

$(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();
});


});

Это jQuery, используемый для аккордеона, и полный рабочий код находится здесь http://jsfiddle.net/gvolkerding/ancu6fgu/3/ Один из примеров был бы, если бы мы задали один из главных вопросов: "Как мне зарегистрироваться на получать рекламные письма?", тогда страницу нужно будет загрузить с открытым разделом 4 аккордеона. У нас есть 8 отдельных страниц с вопросами на них, поэтому в идеале все, что мне нужно было бы сделать, это поместить ссылку с запросом после него (или любым другим способом, который вы могли бы придумать), чтобы указать на правильную страницу / вопрос. Я действительно ценю любую помощь, которая предлагается, спасибо всем.

Источник

2 ответа

Решение

В скрипке вы используете идентификаторы (например, аккордеон-3) для идентификации, отображения и скрытия секций аккордеона. Этот идентификатор вы также можете использовать в качестве якоря для любой ссылки на ваши часто задаваемые вопросы. Поместите следующий код в конец document.ready функция:

// 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');
}

и ссылка на страницу будет что-то вроде /path/to/faq.html#accordion-3, Где accordion-3 - это идентификатор якоря / элемента, который вы хотите открыть. Помните, что страница также прокручивается до положения элемента с соответствующим идентификатором (accordion-3). Чтобы избежать этого, вам нужно будет либо прокрутить вверх после запуска клика, либо использовать GET-параметр вместо хеша местоположения.

Обновление: включая прокрутку страницы к вопросу

Из-за комментария ниже, здесь версия, включающая решение, чтобы перейти к активному вопросу.

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
        });
    }       

}

Обновленная скрипка здесь.

Источник

Один из способов сделать это - передать индекс вопроса в качестве параметра запроса. Тогда вы получите значение параметра в вашем коде, скажем, qIndex и затем добавьте следующее:

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

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

DEMO

Источник
Другие вопросы по тегам