Jquery how to hide other visible divs on click

Question

Two questions please:

1) In this example, http://jsbin.com/ijuli, how do I make it so when one image is clicked, the other un-hidden .clickSave divs go back to hidden.

2) Is there a more efficient way to write the JS code?

Jquery

$(".clickSave").hide();  
    $(".one").click(function() {
    $(".clickSave.one").toggle(); 
});

$(".clickSave").hide();  
    $(".two").click(function() {
    $(".clickSave.two").toggle(); 
});

$(".clickSave").hide();  
    $(".three").click(function() {
    $(".clickSave.three").toggle(); 
});

Thank you so much in advance! I'm so confused by all this.

Answer 1

You can do this:

$(document).ready(function() {
    $(".clickSave").hide();

    $("a").click(function() {  // attaches click handler to links       
        // toggle clickSave element inside the clicked link
        var ele = $(".clickSave", this).toggle();
        // hide all other visible clickSave elements
        $(".clickSave:visible").not(ele).hide(); 
    });
}); 

Demo

Answer 2

You can change your code to be more generic like this:

$(function() {
    $(".clickSave").hide();
    $(".choose-theme-bar ul li a").click(function() {
      $(this).find(".clickSave").toggle() //toggle current
       .end().parent().siblings().find(".clickSave").hide(); //hide others
    });
});

You can view an updated version of your demo here

Answer 3

This should work:

 $('.clickSave').click( function() {
    $('.clickSave').hide()
    $(this).show()
 })