I am currently working on a site and I need to have a "frequently asked questions" section. I designed it simply with a question, an icon and when you click on the div of that question, the answer appears.
I managed to make the answer appear without too much trouble but I am missing one last element, the rotation of the "+" icon which will become an "x".
I can't manage to rotate and animate this icon, I tried several ways but nothing works. I'm really a beginner in development especially if it touches the javascript.
I am open to any advice and tips to help me, thanks in advance <3
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
$(this).next('.content').slideToggle(200);});
});body{
font-family:helvetica}
.show_hide{
cursor:pointer;}
#text{
display:none;}
.btn-container{
margin: auto;}
#icon{
border-radius:50%;
border:1px solid black;
padding:5px;
float:right;}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<section id="faq">
<h2> Multiple questions</h2>
<hr>
<div class="show_hide" data-content="toggle-text">
<big>This is a question ?</big>
<i id="icon"class="fas fa-plus"></i>
</div>
<div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div>
<hr>
<div class="show_hide" data-content="toggle-text">
<big>This is a question ?</big>
<i id="icon"class="fas fa-plus"></i>
</div>
<div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>Use the fa-rotate-* and fa-flip-* classes when you reference an icon.
<i id="icon"class="fas fa-plus fa-rotate-90"></i>
Add a toggleClass() inside the click event in JS file; then make a active class (or any other name you pick) inside CSS file where this class makes its content rotate by 45 degree via transform: rotate(45deg).
Also, make sure all the id names are unique within a single HTML document. In your case, I think it's better to change the id="icon" into "class="icon" as this is what class suppose to be.
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
$(this).find('.icon').toggleClass('active');
$(this).next('.content').slideToggle(200);
});
});body{
font-family:helvetica}
.show_hide{
cursor:pointer;}
#text{
display:none;}
.btn-container{
margin: auto;}
.icon{
border-radius:50%;
border:1px solid black;
padding:5px;
float:right;}
.icon.active {
transform: rotate(45deg)
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<section id="faq">
<h2> Multiple questions</h2>
<hr>
<div class="show_hide" data-content="toggle-text">
<big>This is a question ?</big>
<i class="icon fas fa-plus"></i>
</div>
<div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div>
<hr>
<div class="show_hide" data-content="toggle-text">
<big>This is a question ?</big>
<i class="icon fas fa-plus"></i>
</div>
<div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>