javascript – React js app – collapse learn extra – learn much less button wants double click on

I’ve this subject the place I must click on a button twice to indicate kind of of the textual content content material in a div.
A number of questions, a lot alike can be found on-line, however I am unable to discover a solution to my instance, therefore why I require some group assist.

The instance I adopted is proven right here: https://www.youtube.com/watch?v=2wQxF7gTcFo&t=173s
For some purpose it looks as if this individual solely must click on as soon as, I am undecided what I am doing unsuitable…

Under are some elements of the code I’ve written to implement this characteristic on the positioning.

js code

operate ReadMoreLess() {
    let extra = doc.querySelectorAll('.extra');
    for (let i = 0; i < extra.size; i++) {
      extra[i].addEventListener('click on',operate(){
        extra[i].parentNode.classList.toggle('lively')
      })
    }
  }

html code – inside return()

<div className="containerNFT">
  <div className="card">
     <div className="content material">
        <h3>Learn Extra or Much less</h3>
        <p>
        Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content 
        Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content 
        Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content  
        Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content Textual content 
        </p>
    </div>
    <button sort="button" onClick={ReadMoreLess} className="extra" title="Learn"></button>
  </div>
</div>

css code

.containerNFT {
  place: relative;
  show: flex;
  justify-content: middle;
  align-items: middle;
  flex-wrap: wrap;
  /*border: 1px stable black;*/
  margin-left: 50px;
}

.containerNFT .card {
  place: relative;
  width: 600px;
  padding: 11px;
  margin: 11px;
  border: 20px stable #fff;
}

.containerNFT .card::earlier than {
  content material: '';
  place: absolute;
  prime: 0;
  proper: 0;
  border: 20px stable clear;
  border-top: 20px stable #0066FF;
  border-right: 20px stable #0066FF;
}

.containerNFT .card.lively::earlier than {
  border-top: 20px stable #0133FF;
  border-right: 20px stable #0133FF;
}

.containerNFT .card .content material {
  place: relative;
  peak: 225px;
  overflow: hidden;
}

.containerNFT .card.lively .content material {
  peak: auto;
}

.containerNFT .card .content material::earlier than {
  content material: '';
  place: absolute;
  backside: 0;
  left: 0;
  width: 100%;
  peak: 100px;
  background: linear-gradient(clear, #fff);
}

.containerNFT .card.lively .content material::earlier than {
  show: none;
}

.containerNFT .card .content material h3 {
  font-size: 0.75em;
  font-weight: 600;
  margin-bottom: 10px;
}

.containerNFT .card .content material p {
  font-weight: 300;
}

.extra {
  border-color: #0066FF;
}

.containerNFT .card .extra {
  place: relative;
  padding: 10px 15px;
  background: #0066FF;
  border-radius: 8px;
  margin-top: 15px;
  show: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 14px;
  colour: #fff;
}

.containerNFT .card.lively .extra {
  background: #0133FF;
}

.containerNFT .card .extra::earlier than {
  content material: 'Learn extra';
}

.containerNFT .card.lively .extra::earlier than {
  content material: 'Learn much less';
}

I really feel like the best way this css is written overcomplicates issues a lot, however I can also’t discover a first rate instance on the right way to partially disguise textual content (clear) with the useState hook. That is why, for now, I would like to stay to this css.

That is the endgoal:

All suggestions and assist is way appreciated. Thanks.