Read more button that rotate on click-CodePudding

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  data-content="toggle-text">
  <big>This is a question ?</big>
  <i id="icon"></i>
</div>  

<div >This is an answer.<br>This is an answer.<br>This is an answer.</div>

<hr>

<div  data-content="toggle-text">
  <big>This is a question ?</big>
  <i id="icon"></i>
</div>  

<div >This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>

CodePudding user response：

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 " 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  data-content="toggle-text">
  <big>This is a question ?</big>
  <i ></i>
</div>  

<div >This is an answer.<br>This is an answer.<br>This is an answer.</div>

<hr>

<div  data-content="toggle-text">
  <big>This is a question ?</big>
  <i ></i>
</div>  

<div >This is an answer.<br>This is an answer.<br>This is an answer. </div>
<hr>

CodePudding user response：

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

 <i id="icon"></i>