JQuery несколько toggle

Question

Я пытаюсь узнать, как использовать jquery/animation, и я застрял. Когда я нажимаю на # menu1, показывается переключение, но когда я нажимаю на # menu2, он закрывает только # menu1.

Моя цель состоит в том, чтобы сделать # menu2 переключением и в то же время # menu1 dissapear вместо того, чтобы просто покрыть его.

Благодаря сообществу для их руководства.

**JQUERY**    


    <script> 
    $(document).ready(function(){ 
    $("#menu1").click(function(){ 
    $("#Accueil").animate({width: 'toggle'}); 
    }); 
    }); 
    </script> 

    <script> 
    $(document).ready(function(){ 
    $("#menu2").click(function(){ 
    $("#Events").animate({width: 'toggle'}); 

    }); 
    }); 
    </script> 

**HTML CODE** 
    <div id="body"> 
     <div id="Accueil"> 
     </div> 
     <div id="Events"> 
     </div> 

     <div id="MenuBar"> 
      <div id="menu1"> 
      </div> 
      <div id="menu2"> 
      </div> 
     </div> 
    </div> 
**CSS** 
#Accueil 
    background-color: brown; 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 70%; 
    height: 100%; 
    margin-left: 30%; 
    border-radius: 3px; 

#Events 
    background-color: purple; 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 70%; 
    height: 100%; 
    margin-left: 30%; 
    border-radius: 3px; 

Answer 1

 <style> 
     *{ margin:0; padding:0; box-sizing:border-box; list-style:none; outline:none; text-decoration:none;} 
     .accordion { width:500px; margin:15px 0 0 15px; background:#000; color:#fff; padding-right:10px;} 
     .accordion ul li { border:1px solid #fff; margin-bottom:10px; padding:2px;} 
     .accordion ul li a { color:#fff; display:block; } 
     .accordion ul { padding:10px 0 10px 10px;} 
     .accordion ul li ul { display:none;border-top:1px dotted #fff;} 

     </style> 


    <div class="accordion"> 
    <ul> 
    <li> 
    <a href="#">1</a> 
     <ul> 
     <li>1.1</li> 
     <li>1.2</li> 
     <li>1.3</li> 
     </ul> 
    </li> 

    <li> 
    <a href="#">2</a> 
     <ul> 
     <li>2.1</li> 
     <li>2.2</li> 
     <li>2.3</li> 
     </ul> 
    </li> 


    <li> 
    <a href="#">3</a> 
     <ul> 
     <li>3.1</li> 
     <li>3.2</li> 
     <li>3.3</li> 
     </ul> 
    </li> 


    </ul> 

    </div> 


    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script> 
    $(document).ready(function() { 

    $('.accordion li a').click(function(e){ 
    if($(this).hasClass('clicked')){     // check if current list is already open 
    $(this).removeClass('clicked').next('ul').slideUp(500); // If yes then closes the current list 
    } 
    else{ 
    $('.accordion li a').removeClass('clicked').next('ul').slideUp(500); // Remove the Clicked class from all anchors and Slide Up All ULs 
    $(this).addClass('clicked').next('ul').slideDown(500); // add clicked class to clicked anchor and slide Down its next UL 
    } 
    }) 

    }); 

    </script>