Forums

mattvot

Hey,

I'm stuck while learning jQuery.

When somebody clicks the anchor '.wid1235 a.min' I want to hide() '.wid1235 .content' and change '.wid1235 a.min' to '.wid1235 a.max'

Then when somebody clicks the anchor '.wid1235 a.max' I want to show() '.wid1235 .content' and change '.wid1235 a.max' to '.wid1235 a.min'

Because .wid1235 varys, does anybody know a way to do this while not having to define each .wid.... each time?


<div class=\"widget  wid1235\">
                    	<div class=\"extra\">
                    		<a href=\"#\" class=\"close\"></a>
				<a href=\"#\" class=\"min\"></a>
                    		<a href=\"#\" class=\"edit\"></a>
                    	</div>
                    	<h3>Title</h3>
                    	<div class=\"content\">
                    	</div>
</div>

So far I have this, a whole bunch of unsemantic code :( that doesn't even work. I was going to use PHP to create new code based on the different widgets :/


		$(function(){
			
			$('.wid1234 a.min').click(function(){ $('.wid1234 .content').hide(); $(this).removeClass('min'); $(this).addClass('max'); });
			$('.wid1234 a.max').click(function(){ $('.wid1234 .content').show(); $(this).removeClass('max'); $(this).addClass('min'); });
			
			$('.wid1236 a.min').click(function(){ $('.wid1236 .content').hide(); $(this).removeClass('min'); $(this).addClass('max'); });
			$('.wid1236 a.max').click(function(){ $('.wid1236 .content').show(); $(this).removeClass('max'); $(this).addClass('min'); });
			
			$('.wid1237 a.min').click(function(){ $('.wid1237 .content').hide(); $(this).removeClass('min'); $(this).addClass('max'); });
			$('.wid1237 a.max').click(function(){ $('.wid1237 .content').show(); $(this).removeClass('max'); $(this).addClass('min'); });
		});

Thanks a whole bunch!

treehouse : what would you like to learn today?

Forums

jQuery toggle show/hide on class and change current class?