Practice Accordion

by SpluntyGeese

HTML

<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>

CSS

*{
  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;
}

JavaScript

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