web-dev-qa-db-fra.com

Plusieurs lire plus / lire moins de sections ne fonctionnent pas sur une page

J'ai plusieurs sections en lecture multiple/lire moins de sections pour une page. Si j'utilise une seule lecture en lecture/moins sur la page, cela fonctionne bien, si j'utilise plusieurs sections de la page, une seule section fonctionne, d'autres ne fonctionnent pas. J'ai besoin de plusieurs sections pour travailler sur la même page.

const content = document.querySelector(".content-inner");
const contentFull = document.querySelector(".content-full");
const more = document.querySelector(".read-more");
let open = false;

if (more) {
  more.addEventListener("click", (e) => {
    if (open) {
      content.removeAttribute("style");
      e.target.innerText = "click here";
      open = false;
    } else {
      content.style.maxHeight = `${contentFull.clientHeight}px`;
      e.target.innerText = "read less";
      open = true;
    }
  });
}
.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}
<div class="content">
  <div class="content-inner update-modal">
    <div class="content-full">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <span class="read-more">click here</span>
</div>
javascripthtmlcssaccordion
1
Designer16

Vous devez sélectionner la sélection relative pour effectuer cette opération car la classe est répétitive. Ici, la Togglereadmore Fonction s'attachera à toutes les commandes en lecture plus et effectuez l'action de manipulation de la hauteur sur la classe interne du contenu.

var prevOpened = null;
function toggleReadMore(e) {
  if(prevOpened !== null && e.target !== prevOpened){
     prevOpened.click();
  }
  // get the current section parent. This will make the selection on other class items easier. 
  var contentSection = e.target.closest('.content');
  var contentInner = contentSection.querySelector('.content-inner');

  if (e.target.textContent === "read less") {
    contentInner.removeAttribute("style");
    e.target.innerText = "click here";
    prevClicked = null;
    return;
  }
  contentInner.style.maxHeight = `${contentSection.querySelector('.content-full').clientHeight}px`;
  e.target.innerText = "read less";
  prevOpened = e.target;
}

var readMoreSections = document.querySelectorAll(".read-more");
readMoreSections.forEach(function(sections) {
  sections.addEventListener("click", toggleReadMore);
})
.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}

.content-inner {
  max-height: 20px;
  overflow: hidden;
}
<div class="content">
  <div class="content-inner update-modal">
    <div class="content-full">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <span class="read-more">click here</span>
</div>


<div class="content">
  <div class="content-inner update-modal">
    <div class="content-full">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <span class="read-more">click here</span>
</div>

Edit: Ceci a été mis à jour pour ouvrir uniquement l'article dernier cliqué.

0
Rajesh Paudel