[images for my project]
[1]: https://i.sstatic.net/a6EFH.png
[2]: https://i.sstatic.net/lMhNu.png
Clicking on the orange arrow should trigger a 180-degree rotation.
Can this be achieved using CSS or do I need to utilize JavaScript?
Also, how can I declare a variable and assign a pseudo-element as its value in ReactJS?
<div className="container">
<div className="imgBox">
<img src={img_1} alt="img_1" className="img_1" />
<img src={img_2} alt="img_2" className="img_2" />
</div>
<div className="textBox">
<h1>FAQ</h1>
<div className="questions">
<div>
<button
onClick={() => {
hideText(p1);
}}
>
How many team members can I invite?
</button>
<p ref={p1} className="p1 not-active">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button
onClick={() => {
hideText(p2);
}}
>
How many team members can I invite?
</button>
<p ref={p2} className="p2 not-active">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button
onClick={() => {
hideText(p3);
}}
>
How many team members can I invite?
</button>
<p ref={p3} className="p3 not-active">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button
onClick={() => {
hideText(p4);
}}
>
How many team members can I invite?
</button>
<p ref={p4} className="p4 not-active">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
<div>
<button
onClick={() => {
hideText(p5);
}}
>
How many team members can I invite?
</button>
<p ref={p5} className="p5 not-active">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Temporibus obcaecati, quae, corporis.
</p>
</div>
<hr />
</div>
</div>
</div>
Styling
.container>.textBox>.questions>div>button {
width: 100%;
height: 30px;
background: transparent;
color: var(--Very-dark-grayish-blue);
font-size: 15px;
text-align: left;
border: 0;
cursor: pointer;
outline: none;
}
.container>.textBox>.questions>div>button:hover {
color: var(--Soft-red);
}
.container>.textBox>.questions>div>button:focus {
font-weight: bold;
}
.container>.textBox>.questions>div>button::after {
content: url(./images/icon-arrow.svg);
float: right;
}
.container>.textBox>.questions>div>button::after:focus {
transform: rotate(180deg);
}