asked on

jQuery toggleClass images

I am using jquery to toggle visibility between multiple gridviews. Next to each toggle trigger, I am using jquery toggleclass to toggle between background images.The class toggles when I click each trigger but not when I click the same trigger multiple times.

<style type="text/css">
.arrowup {
  background: url('/images/arrows.gif') no-repeat 0 6px;
}
.arrowdown {
  background: url('/images/arrows.gif') no-repeat 0 -50px;
} 
</style>

<script type="text/javascript">
jQuery.noConflict()(function($) {
  $("p").click(function() {
    $(this).toggleClass("arrowup arrowdown");
  });
});
</script>

<p class="arrowup"><a href="">List 1</a></p>
<p class="arrowup"><a href="">List 2</a></p>
<p class="arrowup"><a href="">List 3</a></p>

<asp:GridView...>List 1</asp:GridView>  
<asp:GridView...>List 2</asp:GridView>  
<asp:GridView...>List 3</asp:GridView>

Open in new window

webwyzsystems

You need to get the current state of the toggle first, then set the value based on that.

this toggles one way:
$(this).toggleClass("arrowup arrowdown");

but don't you need a
$(this).toggleClass("arrowdown arrowup");

as well?

yourbudweiser

ASKER

I don't need the the 2nd toggleClass because it would only hit the <p> element that called it...

rjdown

Indeed, you don't need a second toggleClass. It will remove or add all classes specified as appropriate, regardless of the order.

yourbudweiser - I took your example, changed the background images (as I obviously don't have the same ones as you) and set the hrefs of the links to "#". It worked fine in IE8, FF3 and Chrome! I suspect there is other JS or CSS code interfering with things. You'll need to provide more of your code.

yourbudweiser

ASKER

Please review the sample located at http://www.yourbudweiser.com/toggle/.

Clicking on the same link toggles the image but clicking on one link and then another doesn't toggle the 1st link back to it's inactive state.

ASKER CERTIFIED SOLUTION

rjdown

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

yourbudweiser

ASKER

I am showing up arrows for collapsed content and down arrow for expanded content.

Regardless, thanks for the help, works perfect.