rotate FontAwesome “arrow” icon when the accordion is active

问题

Adding some Icons to my accordion that should rotate upon the accordion being active. They need to point DOWN when acive, and point to the RIGHT when closed.

Creating the Accordion is done with the jQuery's accordion feature.

I used a FontAwesome arrow. Managed to add the rotation aspect of it with no issue, but I ran into 2 further issues:

I can make the arrow clickable + it will rotate, but it wont rotate if i click the Accordion-box itself
Change the (".rotate") to ("#accordion"), but then all the arrows change, even header/box is active and the 2nd one isn't.

At first I used the following CSS:

.ui-accordion-icons .ui-icon::before{
    content: "▶";
}

.ui-accordion-header-active .ui-icon::before{
    content: "▼";
}

to add the icons as "content" to the accordion, and switching works fine, but i couldnt get an animation to work with it.

So i started to change it up, and try to get it working with jQuery.

$(function () {
    //accordion
    $("#accordion").accordion({
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
    
    $(".rotate").click(function(){
    if ($("#accordion").accordion("option", "active")) {
      $(".rotate").toggleClass("down"); 
    }
    })
});

#accordion {
    padding-top: 100px;
}

#accordion h3 {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.ui-accordion-header {
    border: 1px solid grey;
    padding: 10px 20px;
}

.ui-accordion-content {
    padding: 10px 20px;
}

.ui-accordion-header-active {
    color: blue;
    border: 1px solid blue;
}

.arrow {
    margin-right: 20px;
}

.rotate{
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <div id="accordion">
     <h3> <i class="fas fa-caret-right rotate arrow"></i> Section 1 </h3>
     
     <div>
         <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
            lobortis. Phasellus pellentesque purus in massa. Aenean.
           </p>
      </div>  
      
      <h3><i class="fas fa-caret-right rotate arrow"></i> Section 2 </h3>
       
      <div>
        <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
          lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
        </p>
      </div>

Is there still a way to animate with the content (basically rotating from pointing right to pointing down)? if not, how can i fix the jQuery code for the FontAwesome stuff to get to work properly when an accordion-tab is active and when it's not?

回答1:

Use the active state to transform the icon

.ui-state-active .fas{
   -moz-transform:rotate(90deg);
   -webkit-transform:rotate(90deg);
   transform:rotate(90def);
}

The code I modified:

$(".rotate").click(function(){
    if ($("#accordion").accordion("option", "active")) {
      $(".rotate").toggleClass("down"); 
    }
  })

to:

//Clicked on the h3 element
$("h3").click(function(){       
   //$(this) refer to the h3 clicked, so we find the .rotate (icon) and toggle the class "down"    
   $(this).find('.rotate').toggleClass("down");       
   //we remove the class down from all the .rotate icons
   $('.rotate').removeClass("down"); 
})

Why?

The $('.rotate').click(); is called every time you click the icon (.rotate) but that's not what we want.
The $('h3').click() is more aproppiate to trigger the click on each "Accordeon" because is triggered on all h3 space and not only over the icon.

$(function () {
    //accordion
    $("#accordion").accordion({
        heightStyle: "content",
        active: false,
        collapsible: true,
    });
    
    $("h3").click(function(){      
      $(this).find('.rotate').toggleClass("down"); 
      $('.rotate').removeClass("down"); 
    })
});

#accordion {
    padding-top: 100px;
}

#accordion h3 {
    font-size: 24px;
    font-weight: bold;
    padding-left: 20px;
}

.ui-accordion-header {
    border: 1px solid grey;
    padding: 10px 20px;
}

.ui-accordion-content {
    padding: 10px 20px;
}

.ui-accordion-header-active {
    color: blue;
    border: 1px solid blue;
}

.arrow {
    margin-right: 20px;
}

.rotate{
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.rotate.down{
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);
}
.ui-state-active .fas{-moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    transform:rotate(90def);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

 <div id="accordion">
     <h3> <i class="fas fa-caret-right rotate arrow"></i> Section 1 </h3>
     
     <div>
         <p>
            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
            lobortis. Phasellus pellentesque purus in massa. Aenean.
           </p>
      </div>  
      
      <h3><i class="fas fa-caret-right rotate arrow"></i> Section 2 </h3>
       
      <div>
        <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque 
          lobortis. Phasellus pellentesque purus in massa. Aenean in pede.
        </p>
      </div>

来源：https://stackoverflow.com/questions/56560307/rotate-fontawesome-arrow-icon-when-the-accordion-is-active

标签

jquery

html

css