We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

jQuery: Toggle more than once

hankknight
hankknight asked
on
Medium Priority
412 Views
Last Modified: 2012-05-11
How can I toggle an item more than once?

In the example below, if you click on a blue box it should turn red, and if you click on a red box it should turn blue.

The problem is that my code will only allow you to change each item once.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
a.maximize {display: block; width: 44px; height: 44px;background:  red;cursor: pointer;}
a.minimize {display: block; width: 44px; height: 44px;background: blue;cursor: pointer;}
</style>
</head>
<body>

<h1>Click a red item to make it blue.</h1>
<h1>Click a blue item to make it red.</h1>

 <p>
  <a class="minimize"></a>
 </p>

 <p>
  <a class="maximize"></a>
 </p>

<script type="text/javascript">
/* <![CDATA[ */

$('.minimize').click(function() {
  $(this).removeClass('minimize');
  $(this).addClass('maximize');
  $(this).attr('title','Minimize');
});

$('.maximize').click(function() {
  $(this).removeClass('maximize');
  $(this).addClass('minimize');
  $(this).attr('title','Maximize');
});

/* ]]> */
</script>
</body>
</html>

Open in new window

Comment
Watch Question

Lead Developer
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.