on click to hide div

Question

I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).

However, I don't know how to close all the already opened divs when I click on other buttons. For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.

My relevant HTML

<div id="controls">
    <input type="button" class="addBtn" value="Add" id="add"/>
    <input type="button" class="editBtn" value="Edit"  id="edit"/>
    <input type="button" class="viewBtn" value="View" id="view"/>
    <input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

My JS:

$(document).ready(function(){
    $("#add").click(function(){
        $("#test1").slideToggle("fast");
    });
    $("#edit").click(function(){
        $("#test2").slideToggle("fast");
    });
    $("#view").click(function(){
        $("#test3").slideToggle("fast");
    });
});

Thanks for suggestions and tips.

Answer 1

i guess this is the simplest thing you can do.. hope this helps you..

<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit"  id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

http://jsfiddle.net/alaskaz1864/VtLzB/1/

Answer 2

replace your jquery code with the following code

  $(document).ready(function()
    {
    $("#add").click(function(){
         $("#test1").show();
        $("#test2,#test3").hide();
    });
    $("#edit").click(function(){
    $("#test2").slideToggle("fast");
        $("#test1,#test3").hide();
    });
    $("#view").click(function(){
    $("#test3").slideToggle("fast");
        $("#test1, #test2").hide();
    });
    });