Wordpress sidebar menu. Show one div and hide all others
I would appreciate your help on this.
The following code is for a wordpress sidebar vertical menu. For now, when
a user clicks on items with submenus, all of them would stay opened unless
he clicks on items again.
I would need only one submenu to be opened at a time when a user click .
Thank you.
Here is my code:
HTML-->
<nav id="top-menu">
<ul class="nav et_disable_top_tier" id="menu-main-menu">
<li class="menu-item menu-item-type-custom
menu-item-object-custom current-menu-item current_page_item
menu-item-home menu-item-756" id="menu-item-756">
<a
href="http://graphic-redsoyu.com/andretschan/"><span
class="link_bg"></span><span
class="link_text">ACCUEIL</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-982" id="menu-item-982">
<a class="" href="#"><span
class="link_bg"></span><span class="link_text">L'ECOLE
DE DANSE<span>+</span></span></a>
<ul class="sub-menu" style="display: none;">
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-795"
id="menu-item-795">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/presentation-de-notre-centre/"><span
class="link_bg"></span><span
class="link_text">PRESENTATION DE
NOTRE CENTRE</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-791"
id="menu-item-791">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/objectifs-valeurs-du-centre/"><span
class="link_bg"></span><span
class="link_text">OBJECTIFS &
VALEURS DU CENTRE</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-792"
id="menu-item-792">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/compagnie-element-terre/"><span
class="link_bg"></span><span
class="link_text">COMPAGNIE ELEMENT
TERRE</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-790"
id="menu-item-790">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/les-succes-des-eleves/"><span
class="link_bg"></span><span
class="link_text">LES SUCCES DES
ELEVES</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-789"
id="menu-item-789">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/nos-studios/"><span
class="link_bg"></span><span
class="link_text">NOS
STUDIOS</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-788"
id="menu-item-788">
<a
href="http://graphic-redsoyu.com/andretschan/lecole-de-danse/la-boutique/"><span
class="link_bg"></span><span
class="link_text">LA
BOUTIQUE</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-889" id="menu-item-889">
<a class="et_clicked" href="#"><span
class="link_bg"></span><span class="link_text">NOS
DISCIPLINES<span>+</span></span></a>
<ul class="sub-menu et_active_dropdown"
style="display: block;">
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-884"
id="menu-item-884">
<a
href="http://graphic-redsoyu.com/andretschan/nos-disciplines/cursus-general/"><span
class="link_bg"></span><span
class="link_text">CURSUS
GENERAL</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-885"
id="menu-item-885">
<a
href="http://graphic-redsoyu.com/andretschan/nos-disciplines/disciplines-academiques/"><span
class="link_bg"></span><span
class="link_text">DISCIPLINES
ACADEMIQUES</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-886"
id="menu-item-886">
<a
href="http://graphic-redsoyu.com/andretschan/nos-disciplines/cursus-passion/"><span
class="link_bg"></span><span
class="link_text">CURSUS
PASSION</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-887"
id="menu-item-887">
<a
href="http://graphic-redsoyu.com/andretschan/nos-disciplines/disciplines-annexes/"><span
class="link_bg"></span><span
class="link_text">DISCIPLINES
ANNEXES</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-952" id="menu-item-952">
<a
href="http://graphic-redsoyu.com/andretschan/nos-professeurs/"><span
class="link_bg"></span><span class="link_text">NOS
PROFESSEURS</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-1024" id="menu-item-1024">
<a
href="http://graphic-redsoyu.com/andretschan/informations-pratiques-et-plannings/"><span
class="link_bg"></span><span class="link_text">INFOS
PRATIQUES ET PLANNINGS</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-19" id="menu-item-19">
<a class="et_clicked" href="#"><span
class="link_bg"></span><span class="link_text">LA
GALERIE<span>+</span></span></a>
<ul class="sub-menu et_active_dropdown"
style="display: block;">
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-1925"
id="menu-item-1925">
<a
href="http://graphic-redsoyu.com/andretschan/la-galerie/visuels-les-spectacles/"><span
class="link_bg"></span><span
class="link_text">Visuels – Les
Spectacles</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-1924"
id="menu-item-1924">
<a
href="http://graphic-redsoyu.com/andretschan/la-galerie/visuels-les-stages/"><span
class="link_bg"></span><span
class="link_text">Visuels – Les
Stages</span></a>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-2103"
id="menu-item-2103">
<a
href="http://graphic-redsoyu.com/andretschan/la-galerie/videos/"><span
class="link_bg"></span><span
class="link_text">Vidéos</span></a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-18" id="menu-item-18">
<a
href="http://graphic-redsoyu.com/andretschan/contact-renseignement/"><span
class="link_bg"></span><span
class="link_text">RENSEIGNEMENTS &
CONTACT</span></a>
</li>
</ul>
</nav>
-> JAVASCRIPT
var $comment_form = $('#commentform'),
$mobile_nav = $('#mobile-nav'),
$info_area = $('#info-area'),
$top_menu = $('#top-menu');
$top_menu.find('a').each( function(){
var $this_link = $(this),
link_text = $this_link.text(),
dropdown_sign = '';
if ( $this_link.siblings('ul').length ) dropdown_sign =
'<span>+</span>';
$this_link.html( '<span class="link_bg"></span>' + '<span
class="link_text">' + link_text + dropdown_sign + '</span>' );
} ).click( function(){
var $this_link = $(this);
if ( $this_link.attr('href') == '#' &&
$this_link.hasClass('et_clicked') ) {
$this_link.removeClass('et_clicked');
$this_link.siblings('ul').slideUp( 500
).removeClass('et_active_dropdown');
return false;
}
if ( $this_link.siblings('ul').length ){
if ( $this_link.hasClass('et_clicked') ) {
return;
} else {
$this_link.addClass('et_clicked');
$this_link.siblings('ul').slideDown( 500
).addClass('et_active_dropdown');
return false;
}
}
} );
No comments:
Post a Comment