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.

Also, I know that there shouldn't be a
in the tag - I didn't get to change that on jsbin example. — adamwstl, Jun 23 '10 at 23:22

Felix Kling · Answer 1 · 2010-06-23T23:37:40.353

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

edited Jun 23 '10 at 23:37

answered Jun 23 '10 at 23:30

Felix Kling

795,719
175
1,089
1,143

This would hide all of them, every time ;) – Nick Craver Jun 23 '10 at 23:30
@Nick Craver: Yeah, I just realized it ;) – Felix Kling Jun 23 '10 at 23:32

score 1 · Accepted Answer · answered Jun 23 '10 at 23:30

1

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

answered Jun 23 '10 at 23:30

Nick Craver

623,446
136
1,297
1,155

Quick question: When I remove the DIV from inside the tags, it stops working? Can you tell me how to remedy this? Thanks! – adamwstl Jun 23 '10 at 23:53
@adamwstl: It stops working because then you have no element with class `clickSave` anymore. Hence, jQuery cannot select one. – Felix Kling Jun 23 '10 at 23:54
@adamwstl - Can you post the new markup? If it's *beside* the anchor, just change `$(this).find(".clickSave")` to `$(this).siblings(".clickSave")`, or change the click handler to the `
` by removing the "` a`" at the end of the selector.

Nick Craver

Jun 23 '10 at 23:59

score 1 · Answer 3 · answered Jun 23 '10 at 23:32

1

This should work:

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

answered Jun 23 '10 at 23:32

Rishav Rastogi

15,484
3
42
47

Generally speaking `$(this).show()` shouldn't ever appear *directly* in the body of a `click` handler...what did you click on if it wasn't there already? ;) Also, semi-colons, **always**! – Nick Craver Jun 23 '10 at 23:34

Jquery how to hide other visible divs on click

3 Answers3

Linked