Is There An Easy Way To Toggle Background Position Between Two States On Click Event?

I have a drop down price list broken down into bite size chunks for easier viewing, there are several services being offered and some services break down into sub-categories, the u

Solution 1:

This answer is going to have to be a bit general as you haven't posted any code yet, but there is a callback you get on .slideToggle(). Use that to do the .css()

You'll just have to check which state you're in so you set the right arrow.

For example:

    $('#button1').slideToggle('slow',function() {
        if ( ... ) {
            $('#arrow1').css('background-position','?px ?px');
        } else {
            $('#arrow1').css('background-position','?px ?px');
        }
    });

You'll have to fill in the blanks - or you could implement the callback in another way, but whatever you do if you want to do the css change when the slideToggle fires, using the callback is the way to go.

Solution 2:

I wouldnt modify the background directly via jQuery.css. Id just toggle a CSS class instead. Im not sure what your markup looks like but for the sake of an example lets do it this way:

<divclass="expandable"><ahref="#"class="expandable-expander"><spanclass="arrows">This is our arrow element</span></a><divclass="expandable-content"><p>This is the content to expand!</p><p>This is the content to expand!</p><p>This is the content to expand!</p><p>This is the content to expand!</p><p>This is the content to expand!</p><p>This is the content to expand!</p></div></div>

Then we can do this css:

.arrows {
  /* this is the default state and as the default we want the arrow closed
     so the bg position 0 0 is for the closed state */width:20px;
  height:15px;
  margin:0px auto;
  display: inline-block;
  background: #f00url(images/morearrows.png) no-repeat 00;
  text-indent: -999em;
}
.expandable {
  width:220px;
}
.expandable.expandable-expander {
   display: block;
   background: #ccc;
   width:220px;
   height:8px;
   border:outset 1px#ddd;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   background:#ddd;
   border-radius:25px;
   cursor:pointer;
   overflow:hidden;
}

.expandable.expandable-content {

   /* content is hidden at first unles .expandable is also .open */display: none;
}

.expandable.open.expandable-content {
   display: block;
}

.expandable.expandable-expander:hover {
   background:#eee;
   height:15px;
}

.expandable.open.expandable-expander.arrows {
   background-position: 0 -10px;
   /* only change the background position because everything else is set up */background-color: #0f0;
}

And then finally our jQuery based js:

$(function(){
   $('.expandable .expandable-expander').click(function (e) {
       var$this = $(this),
           $container = $this.closest('.expandable'),
           $content = $container.find('.expandable-content');
       e.preventDefault();

       $content.slideToggle(100, function () {
           $container.toggleClass('open');
       });
   });
});

By doing this way and configuring things based on self contained structures you only need to run this code once on any given page and as long as you use conforming class structure youll be fine. You can reuse it in a number of places without changing much of any thing.

Working Fiddle

Word of caution... unless you can ensure the state of the DOM you might want to avoid toggle functions and use the long hand versions. If something gets out of sync you may be toggling somethings open while toggling other things closed. I dotn think it will be an issue in this case though.