Flipping or rotating an element

[Russinating]

I've got a simple jQuery slideToggle and I want the button, which is a down chevron, to turn to an up chevron when clicked to show that its function is now to close the toggle. What's the simplest way of doing this without yet another plugin?

It can be overwritten with the corresponding up chevron icon, but that requires the script to know whether it's up or down to start with, whereas flipping it vertically or rotating 180 it matters not on its current state.

Help appreciated!

 

[gord]

Use jquery to add CSS transform attribute on click?

http://stackoverflow.com/questions/10808096/using-css-transform-property-in-jquery

 

[Russinating]

Nice idea but it doesn't work because the CSS rotate attribute is relative to the base property, not the current property. So it rotates it by 180 degrees on the first click, but not back again . I could do an if statement potentially, but I'm no good at JS.

 

[gord]

Can you post the toggle JS code you've got already?

edit: deprecated suggestion..
Should be able to use .toggle to switch between the two states rather than just adding the attribute. https://api.jquery.com/toggle-event/

 

[Russinating]

Yeah it's nothing complex though:

$("#filterlower").click(function() {
		$("#filterInner").slideToggle("fast", function() {
  });
});

I tried using this but it doesn't work:

var togglecount = 1;
	
	$("#filterlower").click(function() {
		if($togglecount = 1){
		$('.fa-chevron-down').css('transform', 'rotate(180deg)');
		var togglecount = 2;
		} else {
		$('.fa-chevron-down').css('transform', 'rotate(0)');
		var togglecount = 1;
		}
		$( "#filterinner" ).slideToggle( "fast", function() {
  });
});

 

[Russinating]

Ha, sorted :

$("i", this).toggleClass("fa-chevron-down fa-chevron-up");

Nice 'n easy.

 

[gord]