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

LVL 3
yourbudweiserAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

webwyzsystemsCommented:
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?
0
yourbudweiserAuthor Commented:
I don't need the the 2nd toggleClass because it would only hit the <p> element that called it...
0
rjdownCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

yourbudweiserAuthor Commented:
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.
0
rjdownCommented:
Resetting the other elements is a completely different thing. In this case, you can't just toggle them.

I've edited your page below but I'm not sure on your logic for showing an up for down arrow, I would show an up arrow if the related content is displayed, just swap the hasClass, removeClass and addClass classes around if you want it to work the other way.

NOTE: I added an extra "arrows" class to your arrow <p>'s, otherwise you'll get an arrow showing in your content <p>'s too!






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<title>List 1</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<style type="text/css">
			.marginBottom {margin-bottom:20px;}
			#List1, #List2, #List3 {
				display:none;
			}
			.arrowup {
				padding-left:24px;
				background: url('http://www.yourbudweiser.com/toggle/arrows.gif') no-repeat 0 1px;
			}
			.arrowdown {
				padding-left:24px;
				background: url('http://www.yourbudweiser.com/toggle/arrows.gif') no-repeat 0 -55px;
			}
		</style>
		<script type="text/javascript">
			jQuery.noConflict()(function($) {
				$('#Href1').click(function() {
					$('#List1').slideToggle("medium");
					$('#List2').hide();
					$('#List3').hide();
				});
				$('#Href2').click(function() {
					$('#List1').hide();
					$('#List2').slideToggle("medium");
					$('#List3').hide();

				});
				$('#Href3').click(function() {
					$('#List1').hide();
					$('#List2').hide();
					$('#List3').slideToggle("medium");
				});

				$("p.arrows").click(function() {
					if ($(this).hasClass('arrowdown')) {
						$('p.arrows').removeClass('arrowup').addClass('arrowdown');
						$(this).toggleClass('arrowup arrowdown');
					}
					else {
						$(this).toggleClass('arrowup arrowdown');
					}
				});

			});
		</script>
	</head>
	<body>
		<p class="arrows arrowdown"><a href="List1" onclick="return false;" id="Href1" style="cursor:pointer;">List 1</a></p>
		<p class="arrows arrowdown"><a href="List2" onclick="return false;" id="Href2" style="cursor:pointer;">List 2</a></p>
		<p class="arrows arrowdown"><a href="List3" onclick="return false;" id="Href3" style="cursor:pointer;">List 3</a></p>
		<div style="clear:both; padding:2px;"><!----></div>
		<div id="List1">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel nulla
	nec dui molestie congue. In molestie dui nec magna porttitor volutpat. Fusce
	eget ipsum massa. Donec porta, arcu et ultricies suscipit, metus nisi
	ultrices sapien, vitae pharetra purus odio ac mauris.</p>
		</div>
		<div id="List2">
			<p>Sed eu eros justo, non placerat lacus. Sed tristique sapien lorem, vitae
	sagittis risus. Sed condimentum mattis nibh, quis aliquam neque sodales non.
	Nunc sit amet ligula ut velit tincidunt aliquet in nec augue. Integer eu
	justo vel tortor congue mollis. Proin quis magna mauris, sit amet vulputate
	nunc.</p>
		</div>
		<div id="List3">
			<p>Aliquam ac nunc non ante blandit consectetur vitae nec urna. Donec neque
	purus, consequat ac aliquam sit amet, vehicula sed neque. Nunc viverra
	mauris at ligula consectetur vel auctor turpis pellentesque.</p>
		</div>
	</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
yourbudweiserAuthor Commented:
I am showing up arrows for collapsed content and down arrow for expanded content.

Regardless, thanks for the help, works perfect.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.