Question

I have the following script inside other elements. However, the sub countries only expands and don’t collapse if clicked again. Instead, they expand again no matter how many time you clicks.

Can anyone help please?

<div id="loginContainer">
<a href="#" id="loginButton"><span style="background: #EBEBEB url('/Images/Flags/united_kingdom.jpg') right no-repeat;">United Kingdom</span><em></em></a>
<div style="clear:both"></div>
 <div id="loginBox">
  <!-- Countries Accordion starts here -->
  <ul class="the_menu">
      <li><a href="#" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >United States</a></li>      
      <li>
      <a href="#" class="expand" title="Switzerland" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >Switzerland ..</a>
          <ul class="submenu">
              <li><a href="#" title="Switzerland (German)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (German)</a></li>
              <li><a href="#" title="Switzerland (French)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (French)</a></li>
              <li><a href="#" title="Switzerland (Italian)" style="background: url('/Images/Flags/USA.gif') left no-repeat;;">Switzerland (Italian)</a></li>
          </ul>
      </li>
      <li><a href="#" title="Germany" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Germany</a></li>
      <li><a href="#" class="expand" title="Canada" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada ..</a>
          <ul class="submenu">
              <li><a href="#" title="Canada (English)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada (English)</a></li>
              <li><a href="#" title="Canada (French)" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada (French)</a></li>
          </ul>
      </li>
      <li><a href="#" title="Turkey" style="background: url('/Images/Flags/Germany.gif') left no-repeat;">Turkey</a></li>
      <li><a href="#" title="Sweden" style="background: url('/Images/Flags/Germany.gif') left no-repeat;"> Sweden</a></li>
  </ul>
  </div> 
</div>

And the JQuery script is (please note below the new script):

$(document).ready(function () {


 var countriesContainer = $('#loginContainer');
var button = $('#loginButton');
var box = $('#loginBox');
//var form = $('#loginForm');
//button.removeAttr('href');

countriesContainer.hover(function() {
    box.toggle();
    button.toggleClass('active');
});
box.mouseup(function() { 
    return false;
});

$(this).mouseup(function(login) {
    if(!($(login.target).parent('#loginButton').length > 0)) {
        button.removeClass('active');
        box.hide();
        $('ul.submenu').hide();
    }
});

 $('ul.submenu').hide();
    $('.expand').click( function(){
        $(this).siblings('.submenu').slideToggle('normal');
        return false;
    });
});

Answer 1

there is problem in your markup, in one place .submenu is sibling of .expand and in another place it’s not:

<a href="#" class="expand" title="Switzerland" style="background: url('/Images/Flags/USA.gif') left no-repeat;" >Switzerland ..</a>
          <ul class="submenu">

<li><a href="#" class="expand" title="Canada" style="background: url('/Images/Flags/Germany.gif') left no-repeat;;">Canada ..</a>
          <ul class="submenu">

$(document).ready(function () {
 $('ul.submenu').hide();
    $('.expand').click( function(){
        $(this).parent().next('.submenu').slideToggle('normal');
        return false;
    });
});