How to change the button text when the accordion is collapse?

Question

I want to change the text when filling or unfolding the accordion. I'm on Bootstrap 4.

Currently it works, but the first time the page loads, the button text is not correct.

If I unfold and fold, the text is correct.

Why is this not the right text when the page loads ?

index.html :

  <div id="readmorecollapse">
    <div class="collapse" id="collapserm" aria-expanded="false">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
          <p>TEST<p/>
        </div>
      </div>
    </div>
    <div id="readmorebutton">
      <button role="button" class="btn btn-outline-dark btn-sm w-100" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>

style.css :

#readmorecollapse #collapserm.collapsing {
  height: 7rem;
}

#readmorecollapse #collapserm.collapse:not(.show) {
  display: block;
  height: 7rem;
  overflow: hidden;
}

#readmorecollapse #readmorebutton button.collapsed::after {
  content: 'Afficher toutes les infos';
}

#readmorecollapse #readmorebutton button:not(.collapsed)::after {
  content: 'Cacher les infos';
}

Answer 1

Is because your after has content Afficher toutes les infos only when button has class collapsed and your HTML start without this class, so you just need add the collapsed class in default html, right there:

<div id="readmorecollapse">
    <div class="collapse" id="collapserm" aria-expanded="false">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
          <p>TEST<p/>
        </div>
      </div>
    </div>
    <div id="readmorebutton">
      <button role="button" class="btn btn-outline-dark btn-sm w-100 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>