I have made an accordion, but I want my plus icon to smoothly transition into a minus, how can this be done with jQuery?

Question

So i have made an accordion that does what I want it to do (Granted it could do with more styling but I'm trying to practice jQuery), and i want to make the plus button turn into a minus with a smooth transition, like when you press the heading and the dropdown appears, the plus could rotate and turn into a minus or something like that.

Any help would be greatly appreciated, thank you.

Here is my code so far: https://jsfiddle.net/SpluntyGeese/9fdzej23/39/

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/704e1ec7c9.js" crossorigin="anonymous"></script>
</head>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus</i></div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol. 
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol. 
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> 
</div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol. 
</div>
</div>
<div class="accordion-area">
<div class="acc-trigger"><h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i> 
</div>
<div class="acc-para">This is some test text to ensure that this accordion actually works lol. 
</div>
</div>

*{
font-family: 'Outfit', sans-serif;
}
.acc-trigger {
position: relative;
background: #c87800;
color: #fff;
padding: 10px 20px;
}
.acc-trigger i {
position: absolute;
right: 0;
width: 50px;
top: 50%;
transform: translateY(-50%);
}
.acc-para {
height: 0;
padding: 0;
transition: all 0.3s ease;
color: transparent;
background: #2f2f2f;
}
.acc-para.active {
padding: 20px;
height: auto;
color: #fff;
background: #2f2f2f;
border-left: 5px solid #222;
}
jQuery(document).ready(function($) {
  $(".acc-trigger").click(function() {
    $('.acc-para').removeClass('active');
  $(this).closest('.accordion-area').find('.acc-para').toggleClass('active');
  });
});

Answer 1

You can play with jquery fadeIn and fadeOut ...

 jQuery(document).ready(function($) { $(".acc-trigger").click(function() { $('.acc-para').removeClass('active'); $('.fa-minus').fadeOut(); $('.fa-plus').fadeIn(); $(this).find('.fa-minus').fadeIn(); $(this).find('.fa-plus').fadeOut(500); $(this).closest('.accordion-area').find('.acc-para').toggleClass('active'); }); });

 * { font-family: 'Outfit', sans-serif; }.acc-trigger { position: relative; background: #c87800; color: #fff; padding: 10px 20px; }.acc-trigger i { position: absolute; right: 0; width: 50px; top: 50%; transform: translateY(-50%); }.acc-para { height: 0; padding: 0; transition: all 0.3s ease; color: transparent; background: #2f2f2f; }.acc-para.active { padding: 20px; height: auto; color: #fff; background: #2f2f2f; border-left: 5px solid #222; }

 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/704e1ec7c9.js" crossorigin="anonymous"></script> </head> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div> <div class="accordion-area"> <div class="acc-trigger"> <h2>Heading</h2> <i class="fas fa-plus"></i> <i class="fas fa-minus"></i></div> <div class="acc-para">This is some test text to ensure that this accordion actually works lol.</div> </div>

I have made an accordion, but I want my plus icon to smoothly transition into a minus, how can this be done with jQuery?

Question

1 answers

solution1
0 2021-11-23 14:19:35

I have made an accordion, but I want my plus icon to smoothly transition into a minus, how can this be done with jQuery?

Question

1 answers

solution1 0 2021-11-23 14:19:35

solution1
0 2021-11-23 14:19:35