in my project have one according menu H2 if i click any menu name H2 then its open and show subment. now by default it's 1st (Governing Body) open..so when i click any link say like Add Gallery it's go to that page and Gallery Management will be open (active) and rest of will be close. Now always open 1st one (Governing Body) ..
how could I do that. Any idea. Jquery or php no problem. I just make it work…
please check this http://jsfiddle.net/KM4w6/
$(document).ready(function(){
//sub menu
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
<div class="navarea">
<h2 class="acc_trigger">Governing Body</h2>
<div class="acc_container">
<ul>
<li><a href="new_position.php">Add Position</a></li>
<li><a href="list_position.php">Edit/Delete Position</a></li>
<li><a href="new_member.php">Add Member</a></li>
<li><a href="list_member.php">Edit/Delete Member</a></li>
</ul>
</div>
<h2 class="acc_trigger">Gallery Managment</h2>
<div class="acc_container">
<ul>
<li><a href="new_gallery_info.php">Add Gallery</a></li>
<li><a href="list_gallery_info.php">Edit/Delete Gallery</a></li>
<li><a href="list_gallery_images.php">Gallery Images Management</a></li>
</ul>
</div>
<h2 class="acc_trigger">Other</h2>
<div class="acc_container">
<ul>
<li><a href="cms.php?page='about_us'">About Us</a></li>
<li><a href="new_link.php">Add Link</a></li>
<li><a href="list_link.php">Edit/Delete Link</a></li>
<li><a href="new_event.php">Add Event</a></li>
<li><a href="list_event.php">Edit/Delete Event</a></li>
</ul>
</div>
</div>