effect of an arrow icon in accordion animation

user_10063487 0
Viewed 785

I have this accordion effect that I have added to my project. To this effect I have added some arrows that have to animate in conjunction with the accordion. The problem is that I have managed to get the arrows to rotate, but this effect should only affect the element I click on and not all the elements that use the accordion effect. Could someone help me to solve it?

Thank you very much

// Accordion javascript function with Jquery

$(document).ready(function(){
    $('.accordion-title').click(function() {
        $(this).toggleClass('open');

        $accordion_content = $(this).next('.accordion-content');
        $('.accordion-content').not($accordion_content).slideUp();
        $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
        $accordion_content.stop(true, true).slideToggle(400)

        $('.accordion-title i').toggleClass('rotate');
        


    });
});
.accordion-title {
  display: flex;
  align-items: center;
  cursor: pointer;

  .fas {
    font-size: 2rem;
    margin-right: 0.5rem;
  }
}


.rotate {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}



.accordion-content {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <div class="container">
        <div class="accordion-title">
            <i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 1 </h3>
        </div>
        <div class="accordion-content" style="display: none;"><p> test 1 </p>
        </div>
        <div class="accordion-title"><i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 2 </h3></div>
        <div class="accordion-content"><p> test 2 </p>
        </div>
    </div>

css html jquery
1 Answers

You can manage icon rotate effect via class accordion-title and status class open instead

// Accordion javascript function with Jquery

$(document).ready(function(){
    $('.accordion-title').click(function() {
        $(this).toggleClass('open');

        $accordion_content = $(this).next('.accordion-content');
        $('.accordion-content').not($accordion_content).slideUp();
        $('.accordion-content').not($accordion_content).prev('.accordion-title').removeClass('open');
        $accordion_content.stop(true, true).slideToggle(400)

        // Remove this handle
        //$('.accordion-title i').toggleClass('rotate');
    });
});
.accordion-title {
  display: flex;
  align-items: center;
  cursor: pointer;

  .fas {
    font-size: 2rem;
    margin-right: 0.5rem;
  }
}
.accordion-title i {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.accordion-title.open i {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}



.accordion-content {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



    <div class="container">
        <div class="accordion-title">
            <i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 1 </h3>
        </div>
        <div class="accordion-content" style="display: none;"><p> test 1 </p>
        </div>
        <div class="accordion-title"><i class="fas fa-chevron-right"></i>
            <h3 class="title is-3 has-white-color"> TEST 2 </h3></div>
        <div class="accordion-content"><p> test 2 </p>
        </div>
    </div>

user_109989710
Related