• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 950
  • Last Modified:

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

0
yourbudweiser
Asked:
yourbudweiser
  • 3
  • 2
1 Solution
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
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
 
yourbudweiserAuthor Commented:
I am showing up arrows for collapsed content and down arrow for expanded content.

Regardless, thanks for the help, works perfect.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now