Как спрятать и развернуть текст с двумя абзацами?

@inquisitor · Регистрация: 22.12.2015

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
<p  class ="p1"> Первый абзац
Таким образом, повышение уровня гражданского сознания представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач. Таким образом, постоянный количественный рост и сфера нашей активности создаёт предпосылки качественно новых шагов для дальнейших направлений развитая системы массового участия. Повседневная практика показывает, что консультация с профессионалами из IT обеспечивает широкому кругу специалистов участие в формировании экономической целесообразности принимаемых решений! </p>
<a href=""> ВОТ ЗДЕСЬ ГИПЕРССЫЛКА КЛИКАЯ НА КОТОРУЮ ПОКАЗЫВАЕМ ВТОРОЙ АБЗАЦ С ТЕКСТОМ</a>
<p class ="p2">Соображения высшего порядка, а также начало повседневной работы по формированию позиции требует определения и уточнения позиций, занимаемых участниками в отношении поставленных задач. С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу специалистов участие в формировании направлений прогрессивного развития.</p>
<a href=""> ВОТ ЗДЕСЬ ГИПЕРССЫЛКА КЛИКАЯ НА КОТОРУЮ ПРЯЧЕМ ВТОРОЙ АБЗАЦ С ТЕКСТОМ</a>

нужно на чистом js

@arcmag · 15.07.2019, 16:05

Как бы спойлер что ли?

https://codepen.io/arcmag/pen/qzzRXL?editors=1010

HTML5
1
2
3
4
5
6
<div class="spoiler">
  <a href="#" class="spoiler__title">Спойлер</a>
  <div class="spoiler__content">
    <p>Соображения высшего порядка, а также начало повседневной работы по формированию позиции требует определения и уточнения позиций, занимаемых участниками в отношении поставленных задач. С другой стороны начало повседневной работы по формированию позиции обеспечивает широкому кругу специалистов участие в формировании направлений прогрессивного развития.</p>
  </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
const createSpoiler = (titleSelector, containerSelector) => {
  const container = document.querySelector(containerSelector);
  document.querySelector(titleSelector).addEventListener(`click` , evt => {
    evt.preventDefault();
    container.style.display = container.style.display === `none` ? `block` : `none`;
  });
}
 
createSpoiler(`.spoiler__title`, `.spoiler__content`);

@Egor.S · 15.07.2019, 16:11

менее интересное решение: https://jsfiddle.net/kmLrg927/

JavaScript
1
2
3
4
5
6
7
8
9
10
const paragraphs = document.querySelectorAll('p');
Array.from(document.querySelectorAll('a')).forEach((el, i) => {
  el.addEventListener('click', toggle.bind(null, i))
})
 
function toggle(i, e) {
  e.preventDefault();
  const p = paragraphs[i];
  p.style.display = p.style.display == 'none' ? 'block' : 'none';
}

@inquisitor · 15.07.2019, 16:50 **[ТС]**

Сообщение от E[quote="arcmag

Как бы спойлер что ли?

gor.S;13720449"]менее интересное решение[/quote]

сделал так.
Прошу подкорректировать.
1)Изначально видна ссылка показать и нажав на нее
2)видим второй абзац и ссылка скрыть
Теперь у нас видны две ссылки.
нужно что бы после нажатия на ссылку показать чтобы она стала невидимой.

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p> 
Равным образом выбранный нами инновационный путь позволяет оценить значение системы обучения кадров, соответствующей насущным потребностям? </p>
 
 
 <a href="#" style="display:block;margin-left:70%;" onClick="look('div2'); return false;">показать</a>
 
   
  <div id="div2" style="display:none">
     <p >оставить всю свою боль и горечь в прошлом, моя жизнь началась
     с чистого листа. Святозара  помогла мне снова пробудить свою
     женскую природу, она помогла переосмыслить полученный опыт.
     Благодаря работе, которую с моей душой провела Святозара,
     я снова стала счастливой! Спустя пять лет я замужем 
     и жду ребенка.</p>
   <br>
   <a href="#" style="display:block;margin-left:70%;" onClick="look('div2'); return false;">скрыть</a>
   
  </div>

JavaScript
1
2
3
4
5
6
7
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") 
   param.style.display = "block";
else 
   param.style.display = "none";
}

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .