0

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');
      });
    });
nontechguy
  • 751
  • 5
  • 21
RuntyBeef
  • 9
  • 2
  • 1
    I would advise you to look for ready solution. There is a lot of examples and different approaches. [Here is one](https://codepen.io/Inlesco/pen/XXRRmY) – ciekals11 Nov 23 '21 at 14:44
  • Does this answer your question? [How to change the accordion menu icon with JS?](https://stackoverflow.com/questions/49569579/how-to-change-the-accordion-menu-icon-with-js) – bitski Nov 27 '21 at 15:13

1 Answers1

0

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>
Baro
  • 5,300
  • 2
  • 17
  • 39