Small Javascript question WordPress
- SOLVED
Hello, although not a wordpress question, it is a js question and i'm sure some of you here will be able to answer it. I'm very new to js and need some help with my code.
I have built a side navigation menu that you can only see on mobile sizes below 768. Here is the link: https://tinyurl.com/hhwrpdk.
On menu items 'Integrations' & 'Pricing' there is a dropdown option, I have added an arrow that spins when the dropdown is opened and closes again when the other dropdown is pressed, however if you open and close the same dropdown the arrow does not reset. So upon clicking .dropDown again I want to remove .arrowRotate class.
Here is my code so far:
$('.dropDown').click(function() {
$('a.child-trigger').removeClass('arrowRotate');
$(this).toggleClass('arrowRotate');
return false;
});
Answers (3)
mod mi answers:
I've checked the rest of your code and you already have a function to toggle the sliding submenu parts for Integrations & Pricing. You can simply remove the 'arrowRotate' class at once with the 'child-open' for all siblings as you already do in your click function. And also toggleClass 'arrowRotate' for the '.child-trigger' that is currently clicked along with the '.child-open' class again at the end of the function with $(this). Please try the following:
$("a.child-trigger").click(function() {
$(this).parent().siblings(".hs-item-has-children").find("a.child-trigger").removeClass("child-open arrowRotate”);
$(this).parent().siblings(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
$(this).next(".hs-menu-children-wrapper").slideToggle(250);
$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find("a.child-trigger").removeClass("child-open");
$(this).toggleClass("child-open”).toggleClass("arrowRotate");
return false
});
You can also add the rotation in the .child-open class and keep your js as is:
CSS
a.child-trigger.child-open {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: all .6s
}
JS
$("a.child-trigger").click(function() {
$(this).parent().siblings(".hs-item-has-children").find("a.child-trigger").removeClass("child-open”);
$(this).parent().siblings(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
$(this).next(".hs-menu-children-wrapper").slideToggle(250);
$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find(".hs-menu-children-wrapper").slideUp(250);
$(this).next(".hs-menu-children-wrapper").children(".hs-item-has-children").find("a.child-trigger").removeClass("child-open");
$(this).toggleClass("child-open”);
return false
});
Ross Gosling comments:
Thank you.
Francisco Javier Carazo Gil answers:
What about:
$('.dropDown').click(function() {
if( $(this).hasClass( 'arrowRotate' ) )
$( this).removeClass('arrowRotate');
else
$( this ).addClass( 'arrowRotate' );
return false;
});
Ross Gosling comments:
Thank you, however it did not 1st time.
