Home/ Questions/Q 7789937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T21:26:40+00:00

I’ve got a toggle menu, please see code and function in JsFiddle When you

  • 0

I’ve got a toggle menu, please see code and function in JsFiddle

When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.

However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.

Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?

Any code or examples would be appreciated.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/LcsLr/33/

    HTML

       <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>

<body>

  <div id="productmenu">
    <div class="submenublock" id="submenu1">

        <h3>
            <a href="#" class="link" >Category 1</a>
            <a href='#' class="arrow" ></a>             
        </h3>
        <ul class="second_level">
           <li><a href="#" class="linkx">Option 1</a></li>
           <li><a href="#" class="linkx">Option 2</a></li>
        </ul>
      </div>

      <div class="submenublock" id="submenu2">

      <h3><a href="#" class="link">Category 2</a></h3>

      </div>

      <div class="submenublock" id="submenu3">
          <h3>
              <a href="#" class="link">Category 3</a>
              <a href='#' class="arrow" ></a>
          </h3>
           <ul class="second_level">
               <li><a href="#" class="linkx">Option 1
                   </a></li>
               <li><a href="#" class="linkx">Option 2
                   </a></li>
               <li><a href="#" class="linkx">Option 3
                   </a></li>
           </ul>
      </div>


   </div>

</body>​

    JS

       $(document).ready(function() {

    $('h3,.second_level li').each(function(){
        var href = $(this).children('a').attr('href');

        if(window.location.pathname.search(href) != -1) {
          $(this).children('a').addClass('currentPage')
        }
    });

    $('.currentPage').each(function(){

        var parent;

        if($(this).parent('h3').length > 0){
            parent = $(this).parent('h3');
        }
        else{
            parent = $(this).parents('ul').siblings('h3');
        }

        $(parent).children('.arrow').addClass('open');
        $(parent).siblings('ul').show();

    });

    $('.link').click(function() {

        OpenParent($(this).parent('h3'));

        window.location = $(this).attr('href');

    });

    $('.arrow').click(function(e){
        e.preventDefault();
        OpenParent($(this).parent('h3'));

    });        
});

function OpenParent(CurrentParent){
   var currentArrow = $(CurrentParent).children('.arrow');

   $('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');

   currentArrow.toggleClass('open');

   $(CurrentParent).next().slideToggle('fast');

}​

    CSS

       #sidebar {
   float:left;
   width:220px;
}


#productmenu { width:220px; margin-left: 0px;}

.submenublock{

    margin: 0px;
    padding: 0px;

}

.submenublock h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    margin: 0px; 
    border-bottom:#CCC 1px solid;
}

.submenublock h3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    text-decoration:none;
    color: #000000;

}

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}

.second_level{
    list-style-type:none;
    list-style:none;
    margin:0px;
    padding:0px;

}

.second_level li{
    list-style-type:none;
    list-style:none;
    display: block;
    border-bottom:#CCC 1px dashed;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    /* background:url(images/menuarrowright.gif) no-repeat right;*/
}

.second_level li a{
    display: block;
     margin-left:15px;
     text-decoration:none;
     color:#000000;


}

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}


.second_level{
  display:none;
}

a.currentPage{
  color:blue !important;
}

.link{
    padding:10px;15px;
    display:block;
}

.linkx{
    padding:10px;15px;
    display:block;
}

.arrow{
   background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;

    float:right;
    height:17px;
    width:13px;
    margin-top:-27px;
}

.open{
   background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}


</style>​
    • 0