CODEWITHSUNDEEP
javascriptjquery
gteh
gteh

Reputation: 751

Assign two different jquery click events to same item

I have a button on my site that has jquery that changes some css of other elements on click.

I want to assign another function to reverse the css changes when the button is clicked a second time.

$('.mobileitem').click(function(){
   $('.bottomfooter').css("bottom","75px");
   $('#mobilefoot').css("display", "block");
});

I want to be able to click .mobileitem again and have the css change to bottom:0 display:none for their respective elements.

Each time I click the .mobileitem it should go between the two.

I think it is .toggle() but not sure of the proper syntax or if there is a better way

Upvotes: 0

Views: 190

Answers (5)

exexzian
exexzian

Reputation: 7890

try this:

$('.mobileitem').click(function(){
   $(".bottomfooter, #mobilefoot").toggle(function() {
   $('.bottomfooter).css('bottom','75px');
   $('#mobilefoot').css('display', 'block');
   }, function () {
   $('.bottomfooter').css('bottom','0');
   $('#mobilefoot').css('display', 'none');
   });
});

Upvotes: 0

ankur
ankur

Reputation: 4733

you can write two css classes 

.bottom75
{
  bottom: 75px;
  display: block;
}

.bottom0
{
  bottom: 0px;
  display: none;
}

On click event

$('.mobileitem').click(function(){
  $(this).hasClass('bottom75') ? $(this).addClass('bottom0'): $(this).addClass('bottom75');
});

Upvotes: 0

Jonathan
Jonathan

Reputation: 1981

Try this

function toggleClickEvents(item, click1, click2){
    $(item).off('click').on('click', function(){
        click1();
        toggleClickEvents(item, click2, click1);
    });
}

Or just use .toggle() although it is deprecated and possibly removed. (Not sure what the replacement is)

Upvotes: 1

Viral Jain
Viral Jain

Reputation: 1014

$('.mobileitem').toggle(function(){
   $('.bottomfooter').css("bottom","75px");
   $('#mobilefoot').css("display", "block");
}, function(){
   $('.bottomfooter').css("bottom","0px");
   $('#mobilefoot').css("display", "none");
});

Here's a neater, cleaner example using TOGGLE functionality. It'll work as well. :)

Upvotes: 0

Naryl
Naryl

Reputation: 1888

$('.mobileitem').click(function(){
   var bot_val="75px";
   var dis_val="block";
   if($('.bottomfooter').css("bottom")==bot_val){
       bot_val="0px";
   }
   if($('#mobilefoot').css("display")==dis_val){
       dis_val="none";
   }
   $('.bottomfooter').css("bottom", bot_val);
   $('#mobilefoot').css("display", dis_val);
});

This should work!

Upvotes: 2

Related Questions