0

I have a simple jQuery click handler that animates the change of a divs background image. I would like to create some reusable code so I would not have to copy my code for every div I would like this effect on. How would I go about this?

<style type="text/css">

#divtest.toggled {
	background-image: url('images/alert_closed_small.gif');
	background-position: center;
	background-repeat: repeat;
	background-color:silver;
}
.nottoggled {
	background-image: url('images/alert_future_small.gif');
	background-position: center;
	background-repeat: repeat;
	background-color:silver;
	
}

<script type="text/javascript">

$(document).ready(function(){
  
var toggle=0;

$("#divtest").click(function(event){  

if (toggle == 0) {
		$("#divtest").slideUp("slow", function(){
		$("#divtest").addClass("toggled"); 
		});  
		$("#divtest").slideDown("slow", function() {  
		toggle=1;
                });  

                }else if(toggle == 1) {

		$("#divtest").slideUp("slow", function(){
		$("#divtest").removeClass("toggled");
		$("#divtest").addClass("nottoggled"); 
		});  
		$("#divtest").slideDown("slow", function() {  
	     	toggle=0;
		});  
  }
});
2
Contributors
1
Reply
4
Views
6 Years
Discussion Span
Last Post by Airshow
0

Mapper,

You can avoid the need for the toggle flag by testing whether class name "toggled" is set or not. This makes life much easier.

Also, in jQuery you can address many elements with one statement by giving them all the same class. Here I assume the class name "myTogglingClass", (which you will replace with something more suitable).

Untested

$(document).ready(function(){
  $(".myTogglingClass").click(function(){
    var $this = $(this);
    $this.slideUp("slow", function(){
      if($this.hasClass('toggled')) {
        $this.removeClass("toggled");
        $this.addClass("nottoggled");
      } else {
        $this.removeClass("nottoggled");
        $this.addClass("toggled");
      }
      $this.slideDown("slow");  
    });
  });
});

With a little more thought, it could become even simpler.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.