How to rotate an arrow on click?

Question

I got menu similar to accordion menu with an arrow, that I want to rotate when I click on a link. I tried couple of things like css() method, but it doesn't work.

Here's my CodePen link , but these arrows are font-awesome and they disappear on this site...

JS:

$(document).ready(function(){
            $('.accordion-head').click(function(){
            //First close the one that is open      
                $('.dropdown-content').removeClass('visible-dropdown');
                $('.fa-angle-double-down').css('transform','rotate(0deg)');
            //Then open the one that's clicked on
                $(this).next('.dropdown-content').addClass('visible-dropdown');
                $(this).next('fa-angle-double-down').css('transform','rotate(-90deg)');
                if($(this).attr('class')!='active'){
                    $('.accordion-head').removeClass('active');
                    $(this).addClass('active');
                }
            })
        })

HTML:

<div class="main-container">
<div class="box">
    <header class="page-header">
        <h1>
        Podstawy technik programowania
        </h1>
    </header>
    <main class="main-content">
        <article class="single-article">
            <header class="article-title">
                <h1>Wstęp</h1>
            </header>
            <div class="article-content">
            <br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam finibus at libero sed accumsan. Praesent faucibus a est non mattis. Vestibulum porttitor ac metus elementum sollicitudin. Donec turpis velit, placerat ac pharetra et, iaculis vitae nunc. Ut efficitur felis eu aliquam consectetur. Suspendisse feugiat, mauris ac gravida semper, massa sapien vulputate purus, id sagittis ligula justo sed turpis. Sed ornare quis risus sed luctus. Duis enim sapien, elementum vel tortor eget, auctor tempus urna. Pellentesque urna sapien, lacinia a lacus ac, congue fringilla leo.
            </div>
        </article>
    </main>
    <nav class="site-nav">
        <header class="nav-header">
            <h2>Spis treści</h2>
        </header>
        <section class="nav-menu">
            <a href="#" class="accordion-head">
            <span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
            <hr>
            <a href="#" class="accordion-head">Sieci komputerowe<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
                <ul class="dropdown-content">
                    <li>jeden</li>
                    <li>dwa</li>
                    <li>jeden</li>
                    <li>dwa</li>
                </ul>
        </section>
        <!-- <button class="hamburger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </button> -->
    </nav>

    </div>
</body>

Answer 1

A Few Things:

• CSS rotation does not work on inline elements (like <span> ). Try changing the span to display: inline-block; instead.

• .next() finds the next occurrence after the current element. In your case, the <span> you're trying to access is not after the <a> , it is a child of it. You should be using .children() instead.

• Your arrows start nice and lined-up next to your text because you have transform: translateY(-50%) , however you overwrite the transform property in your jQuery without including it. This is causing the arrows to drop down quite a bit. I've added the translateY(-50%) into your jQuery so that the arrows maintain their positioning.

• Consider using !$(element).hasClass() instead of $(element).attr('class') != ...

jQuery:

$(document).ready(function() {
  $('.accordion-head').click(function() {
    //First close the one that is open      
    $('.dropdown-content').removeClass('visible-dropdown');
    $('.fa-angle-double-down').css('transform', 'translateY(-50%) rotate(0deg)');
    //Then open the one that's clicked on
    $(this).next('.dropdown-content').addClass('visible-dropdown');

    //Changed .next() to .children()
    $(this).children('.fa-angle-double-down').css('transform', 'translateY(-50%) rotate(-90deg)');

    //Changed .attr("class") to .hasClass()
    if (!$(this).hasClass('active')) {
      $('.accordion-head').removeClass('active');
      $(this).addClass('active');
    }
  })
})

CSS:

span.fa-angle-double-down {
  display: inline-block;
}

UPDATED CODEPEN

Answer 2

Only added some css styles. Hope this will help you out.

.nav-menu .accordion-head.active span.fa,
.nav-menu .accordion-head span.fa {
  transition: all .2s;
}

https://codepen.io/hunzaboy/pen/vZqyMN