Question

0

143

Vistas

Icon to rotate on that detail/summary which is open and clicked

When I click the second detail/summary field the icon rotates only on the first detail/summary field and not on the second.

I want the icon to rotate on that detail/summary which is open and clicked.

function changeStyle() {
    let element = document.querySelector(".rotate");
    element.classList.toggle('down');
}

.rotate.down {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.detail-container {
  padding-right: 100px;
  padding-left: 100px;
  width: 100%;
  min-width: 55%;
  display: flex;
  flex-direction: column;
}

summary {
  padding: 22px;
  background-color: #2d2d2d;
  margin-bottom: .4em;
  cursor: pointer;
  outline: none;
  font-size: 1.5em;
  font-family: "roboto", sans-serif;
  font-weight: 300;
}

   

 .plus {
  display: flex;
  justify-content: space-between;
}

details[open] {
  background-color: #2d2d2d;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

details[open] summary {
  border-bottom: 1px solid black;
}

<div class="detail-container">
<details onclick="changeStyle()">           
  <summary>
  <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i>
   </div>
   </summary>        
    <p>
    Lorem
  </p>

   </details>  
  <details onclick="changeStyle()">
  <summary>
 <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i>
  </div>
   </summary>

  <p>
  Lorem
  </p>        
</details>
</div>

This "+" should rotate for 45 degrees because it is clicked but only the top one rotates

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-05T15:08:10.571Z

document.querySelector(".rotate") gets all the rotate elements in the document.

You need to get the element which is clicked, then find it's child that you need to rotate:

function changeStyle() {
    let element = event.target.querySelector(".rotate");
    element.classList.toggle('down');
}

function changeStyle() {
    let element = event.target.querySelector(".rotate");
    element.classList.toggle('down');
}

.rotate.down {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

summary {
  padding: 22px;
  background-color: #2d2d2d;
  margin-bottom: .4em;
  cursor: pointer;
  outline: none;
  font-size: 1.5em;
  font-family: "roboto", sans-serif;
  font-weight: 300;
}
summary {
  list-style: none;
} 

 .plus {
  display: flex;
  justify-content: space-between;
}

details[open] {
  background-color: #2d2d2d;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

details[open] summary {
  border-bottom: 1px solid black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<details onclick="changeStyle()">           
  <summary>
    <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i></div>
  </summary>        
  <p>
    Lorem
  </p>
</details>  

<details onclick="changeStyle()">
  <summary>
    <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i></div>
  </summary>
  <p>
    Lorem
  </p>        
</details>

0

143

Icon to rotate on that detail/summary which is open and clicked

1 Respuestas

0

Encuentra empleos remotos

Andres GPT