HAMMER 123 Ответов: 1

Несколько коробок с функцией read more / read less - справка

Привет,
Моя цель такова: epvpImg: мои навыки рисования плохи![^]

Что я уже пробовал:

I want multiple boxes with Read more / Read less function. I am able to create one working box but when adding more it doesn’t work. I am not that experienced.

What i have:
https://codepen.io/flo44781/pen/agZWwo -> One working Box with Read more / Read less

When i add new boxes do i need to to re write the Java Script for every new box i do?
Can i say the script that it only affect box-1 another script should only affect box-2 …

Best regards,
Florian

1 Ответов

Рейтинг:
0

Udhay Titus P

просто использовать 

parentElement
и 
childNodes
в javascript для динамического события. В вашем случае Нажмите кнопку Использовать событие 
this
в вашей функции или попробуйте следующий ответ. Используйте уникальный идентификатор для кнопки

function myFunction(btn_id) {
  
  var btnText = document.getElementById(btn_id.id);
  var parentElem = btn_id.parentElement;
  var childElemP = parentElem.childNodes;
  var spanElem = childElemP[1].childNodes;
  
  if (spanElem[1].style.display === "none") {
    spanElem[1].style.display = "inline";
    btnText.innerHTML = "Read more"; 
    spanElem[2].style.display = "none";
  } else {
    spanElem[1].style.display = "none";
    btnText.innerHTML = "Read less"; 
    spanElem[2].style.display = "inline";
  }
}


I updated your codepen click here to see this.
[^]