Read more button that rotate on click

Question

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>

Answer 1

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>

Answer 2

Use the fa-rotate-* and fa-flip-* classes when you reference an icon.

 <i id="icon"class="fas fa-plus fa-rotate-90"></i>