Ссылка, чтобы перейти и открыть переключатель div

Question

Я хочу, чтобы рабочий .jquery toggle активировался из ссылки меню навигации. Я также хочу, чтобы страница прокручивалась до открытого div одновременно. Это работает:

$(document).ready(function(){ 
$(".toggle_container3").hide(); 
$(".trigger3").click(function(){ 
    $(this).toggleClass("").next().slideToggle("slow"); 
    return false; //Prevent the browser jump to the link anchor 
}) 

}); 

с этим HTML:

<h4 class="trigger3 dark_grey"> 
<a href="#">Research Themes</a></h4> 
<div class="toggle_container3" id="research"> content </div> 

И это ссылка в меню идет в разделе исследовательские темы на странице:

<li><a href="#research">Research Themes</a></li> 

Но я хочу исследований Темы ссылки пойти и открыть открытый исследовательский отдел. Я попробовал добавить класс .trigger3 к, не повезло. #research перестает работать. После исследования на этом форуме я попытался:

$('#research').click(function (e) { 
e.preventDefault(); 
$(this).toggleClass("").next().slideToggle("slow"); 
    return false; 
window.location.hash = ($(e.currentTarget).attr("href")); 
}); 

Но не повезло. Есть ли что-то, что я могу добавить к исходной функции щелчка .trigger3, которая заставит его работать и с этим? Плюс к этому месту на странице?

Answer 1

Все, что вам нужно, это код ниже, над каждым div, который вы хотите показать/скрыть, добавить кнопку с классом .trigger, и он переключит div под ним. Это создало бы аккордеон. Если кнопки не могут находиться над каждым div для переключения, вы можете добавить к каждой кнопке data-toggle = 'div name' и использовать этот тег, чтобы выбрать div для переключения.

$(".trigger").click(function(){ 
    $(this).next().slideToggle("slow"); // toggle div below button 
    $('.' + $(this).data('toggle')).slideToggle('slow'); // toggle div specified in data-toggle attribute on trigger element 
    return false; //Prevent the browser jump to the link anchor 
})