CODEWITHSUNDEEP
jqueryhtml
user2865400
user2865400

Reputation: 149

Toggle between two different click events using jQuery?

So...I am having a bit of trouble trying to create a toggle effect with jQuery that allows for the alternation between two different click events on an li tag.I want the li tag to fade to 0.5 opacity when clicked and when clicked again to revert back to the original state.

Any help would be appreciated and feel free to recreate on jsfiddle :D

The code that I have so far is:

HTML

<div>
    <li><a href="#">Click</a></li>
</div>

jQuery

$(document).ready(function() {
    $('li').toggle();
});

Upvotes: 0

Views: 119

Answers (1)

ahren
ahren

Reputation: 16959

Check for its current state before proceeding.

Also, <li>'s must have <ul> or <ol> as a parent element.

$('li').on('click', function(e){
  e.preventDefault();
  if($(this).css('opacity') != 1){
    $(this).fadeTo(300,1);
  }else{
    $(this).fadeTo(300,0.5);
  }
});

Demo: http://jsfiddle.net/PZ96m/

Upvotes: 2

Related Questions