Как реализовать работу кнопки «показать полностью»?

Question

[ravlex]

Есть текст, нужно чтобы показывалась только часть его и ниже была кнопка "показать" полность. Как сделать так, чтобы при клике на неё, разворачивался весь текст?

<div class="opisanie">
							<h2>Краткое описание</h2>
							<p>При установке ксенонового оборудования на современные автомобили, оснащенные бортовым компьютером, часто можно столкнуться с тем, что компьютер выдает ошибку в работе системы освещения (загорается соответствующая лампочка на панели приборов). На целом ряде автомобилей это приводит к автоматическому отключению подачи питания на фары. </p>
							<span>показать полностью</span>
							</div>

Answer 1

[sergey]

Можно к примеру так jsfiddle

Comments

[sergey]

Игорь: чем?

[Игорь]

SM: кароче и проще.

[sergey]

Игорь: насчет короче это субъективно, тем более что я набросал на ходу

[Игорь]

SM: а я типа годами выжидал этот вопрос....

[Игорь]

SM: где конкретика милейший? голопом по европам

Answer 2

[Игорь]

Можете ставить сколько угодно таких скрытых блоков,всё будет работать корректно.

function showHideText(elem){   //Вызываем функцию с аргументом в который предается элемент на который был осуществлен клик.

   var hideText     = elem.parentElement.querySelector('.hideText');  //Сохраняем элемент на который был произведен клик,поднимаемся выше по родителю и ищем скрытый элемент  текста по классу hideText

  hideText.classList.toggle('ShowHideText'); //переключаем если есть такой класс то убираем его если нет,то добавляем. 
 elem.classList.toggle('hide'); //Меняем надпись с "показать текст" на "скрыть текст"
  
  
}

В HTML просто установите на кнопку показа onclick="showHideText(this);"

<div class="opisanie">
              <h2>Краткое описание</h2>
    
          <p class="hideText">При установке ксенонового оборудования на современные автомобили, оснащенные бортовым компьютером, часто можно столкнуться с тем, что компьютер выдает ошибку в работе системы освещения (загорается соответствующая лампочка на панели приборов). На целом ряде автомобилей это приводит к автоматическому отключению подачи питания на фары. </p>
          <span onclick="showHideText(this);" class="ShowFullText">показать полностью</span>
  </div>

Код

Comments

[sergey]

вот сейчас глянул вашу писанину, и это ужас, сорри

[Игорь]

SM: конкретизируй,чем?

[Игорь]

Александр А: в чем не правильно?
автор дал образец верстки,код работает прекрасно исходя от его верстки.
В твоем примере даже верстка не та.

Answer 3

[Ankhena]

codepen.io/Ankhena/pen/RREzPj