How can I make the .click do two functions in jquery?

Question

I am super new to jQuery and JaVascript and I love it but I'm having issues,,,

I have an element called button1 that I want to make another element called bubble1 disappear when clicked once and re-appear when clicked again.

I tried this but it did not work

$(document).ready(function(){
    $('#button_1').click(function (){
        $('#bubble1').css('visibility','hidden');
        $('#button_1').click (function(){
            $('#bubble1'.css('visibility'.'visible');
        });
    });
});

This second one worked but the object disappear and re-appears with one click.

$(document).ready(function (){
    $('#button_1').click(function (){
        $('#bubble1').fadeOut();
    });
});
$('#button_1').click(function (){
    $('#bubble1').fadeIn();
});

VisioN · Accepted Answer · 2013-04-06 17:28:51Z

5

You shouldn't re-bind click event, you can just use toggle() or fadeToggle():

$("#button_1").click(function() {
    $("#bubble1").fadeToggle();
});

DEMO: http://jsfiddle.net/E9PRa/

answered Apr 6, 2013 at 17:28

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil · Accepted Answer · 2013-04-06 17:39:18Z

1

You can use toggle instead of click.

Live Demo

$('#button_1').click(function (){
   $('#bubble1').toggle();
});

You are binding click twice you can put condition and binding it twice will cause double action.

edited Apr 6, 2013 at 17:39

answered Apr 6, 2013 at 17:29

Adil

148k25 gold badges217 silver badges207 bronze badges

Comments

lucuma · Accepted Answer · 2013-04-06 17:32:35Z

0

The toggle in the prior answers works great and is what most would do. If you want something explicit which does the same thing and would allow you to do more depending on the state of the other element:

$("#button_1").click(function() {
    if ($("#bubble1").is(':visible')) 
       $('#bubble1').fadeOut();
    else
       $('#bubble1').fadeIn();
});

answered Apr 6, 2013 at 17:32

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

3 Comments

user2736190 Over a year ago

all this answers look great , SPECIALLY the if statement,, but it moves out place. Is it possible to use something like the .css(visibility) or something similar that holds the element in place maybe with the if statement? thanks guys

lucuma Over a year ago

Of course. You can do whatever you want inside the if statement.

user2736190 Over a year ago

Thank YOU , I was able to do it

Collectives™ on Stack Overflow

How can I make the .click do two functions in jquery?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related