slide up and slide down

Question

I have one list with groups name.

<ul id="groups" >
  <li id="group1" ></li>
  <li id="group2" ></li>
  <li id="group3"></li>
</ul>

and sliding containers

 <div id="containers" >
    <ul id="container1" >
      Lorem ipsum ..
    </ul>

    <ul id="container2" >
          Lorem ipsum ..
        </ul>

    <ul id="container3" >
          Lorem ipsum ..
        </ul>
  </div>

What I want to do is when you click on group it is hidding existing container and showing new one.

Answer 1

function hideAll() {
    $("#container1 #containter2 #container3").hide();
}

$("#group1").click(function(){
    hideAll();
    $("#container1").show();
}

$("#group2").click(function(){
    hideAll();
    $("#container2").show();
}

$("#group3").click(function(){
    hideAll();
    $("#container3").show();
}

Fast and brutal but might work if you have a small number of elements. If you have a lot more, then you should break things into classes ($(".container").hide();), etc.