Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this?
You can view a demo of what I have done so far.
JS
$(".nav_tab>ul>li>a").click(function(event) {
$(".nav_tab>ul>li>a").parent().removeClass("activo");
$(this).parent().toggleClass("activo");
var capa = $(this).prop('href').split('#');
$(".nav_tabcontent").slideUp("fast");
$("#"+capa[1]).slideDown("slow");
event.preventDefault();
});
$(".nav_tab>ul>li>h3").click(function(event) {
$(".nav_tab>ul>li>a").parent().removeClass("activo");
var o = $(this).parent().find("a");
o.parent().toggleClass("activo");
var capa = o.prop('href').split('#');
$(".nav_tabcontent").slideUp("fast");
$("#"+capa[1]).slideToggle("slow");
event.preventDefault();
});