Блог

Я хочу изменить текст при заполнении или развертывании аккордеона. Я на начальной стадии 4.

В настоящее время это работает, но при первой загрузке страницы текст кнопки неверен.

Если я разверну и сложу, текст будет правильным.

Почему это неправильный текст при загрузке страницы ?

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';
}
 

Это потому, что у вас after есть контент Afficher toutes les infos только тогда, когда у кнопки есть класс collapsed , а ваш HTML начинается без этого класса, поэтому вам просто нужно добавить collapsed класс в 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 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>
 

Это связано с тем, что вскоре после загрузки страницы ваша кнопка не имеет класса «свернута», даже если она свернута. Возможно bootstrap.js вызовет событие для добавления/удаления класса только после нажатия этой кнопки. Если вы исправите свои 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 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>