Как сделать раскрывающийся текст в html при нажатии

Выпадающий текст при нажатии на ссылку с динамической кнопкой

Добрые форумчане, подскажите как осуществить следующую задачу. Делаю новостной блок, с выпадающим текстом, в js не силен, по сему не могу понять, как прикрутить функцию выпадания текста ко всем блоками, а не только к первому.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

 html xmlns="http://"> head> meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /> title>/title> link href="css/style.css" type="text/css" rel="stylesheet" /> script language="javascript" type="text/javascript"> function showHide(shID) < if (document.getElementById(shID)) < if (document.getElementById(shID+'-show').style.display != 'none') < document.getElementById(shID+'-show').style.display = 'none'; document.getElementById(shID).style.display = 'block'; >else < document.getElementById(shID+'-show').style.display = 'inline'; document.getElementById(shID).style.display = 'none'; >> > /script> style>.more < display: none; >a.showLink, a.hideLink < text-decoration: none; color: red; padding-left: 8px; >a.showLink:hover, a.hideLink:hover < color: #36f; >/style> /head> body> div id="content_news"> h1>Новость №1/h1> p>Это будет краткий текст новости, а ниже ссылка, при нажатии которой будет открываться основная статья. При желании можно добавить картнику, как в предварительный просмотр, так и в скрытый блок. a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Читать далее. /a>/p> div id="example" class="more"> img src="images/news2.png" alt="vk">/a> p>Поздравляем! Вы нашли волшебный скрытый текст! При щелчке по ссылке ниже содержимое будет скрыто снова./p> p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet./p> p>a href="1" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Спрятать./a>/p> /div> /div> div id="content_news"> h1>Новость №2/h1> p>Это будет краткий текст новости, а ниже ссылка, при нажатии которой будет открываться основная статья. При желании можно добавить картнику, как в предварительный просмотр, так и в скрытый блок. a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Читать далее. /a>/p> div id="example" class="more"> p>Поздравляем! Вы нашли волшебный скрытый текст! При щелчке по ссылке ниже содержимое будет скрыто снова./p> p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet./p> p>a href="2" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Спрятать./a>/p> /div> /div> /body>

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Выпадающий блок div, при наведении на ссылку
Добрый день! Есть навигационная панель. Суть задачи такая — при наведении на ссылку в.

Выпадающий текст при нажатии на ссылку
Подскажите. Как в Word 2007 сделать ссылку, при нажатии на которую, снизу появлялся текст. Для.

Как создать раскрывающийся текст при нажатии на ссылку?
Ребята, подскажите, как в word 2010 создать раскрывающийся текст при нажатии на ссылку. То есть.

Как сделать спойлер, чтобы при нажатии на ссылку вместо неё был другой текст?
Как сделать спойлер, чтобы при нажатии на ссылку вместо неё был другой текст?

45 / 41 / 22
Регистрация: 28.01.2015
Сообщений: 162
если взять чисто ваш код и ничего в JS не переделывать то вот так (вместо второй новости):

1 2 3 4 5 6 7 8 9

div id="content_news"> h1>Новость №2/h1> p>Это будет краткий текст новости, а ниже ссылка, при нажатии которой будет открываться основная статья. При желании можно добавить картнику, как в предварительный просмотр, так и в скрытый блок. a href="#" id="example2-show" class="showLink" onclick="showHide('example2');return false;">Читать далее. /a>/p> div id="example2" class="more"> p>Поздравляем! Вы нашли волшебный скрытый текст! При щелчке по ссылке ниже содержимое будет скрыто снова./p> p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet./p> p>a href="2" id="example-hide" class="hideLink" onclick="showHide('example2');return false;">Спрятать./a>/p> /div> /div>

т.е. нужно поменять id в некоторых местах. У третьего блока будет например example3. Просто сравните с первым блоком и все поймете где нужно изменять.

Как сделать выпадающий блок при нажатии?

Как сделать так, чтобы при нажатии на кнопку или на кликабельное изображение выпадал блок с другой информацией (которую потом внедрю)?

• Вопрос задан более трёх лет назад
• 16472 просмотра

Комментировать

Решения вопроса 2

Изучаю html уже 7 лет

Решение — это называется тоггл или аккордеон. (в этом примере чистый javascript ) в самом верху страницы есть работающий пример, советую побольше лазить на этом сайте, получите много информации.
Вот ещё вариант на чистом javascript
Вот вариант на Jquery тут доступна вложенность

Ответ написан более трёх лет назад

Нравится 6 1 комментарий

Раскрывающийся полностью текст html

У меня есть текст, который изначально видно не полностью, нужно чтоб при нажатии кнопки «показать полностью» был виден весь текст и наоборот. Типо так:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 

Показать полностью и после:

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст 

Остальной текст скрыть

Отслеживать

51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков

Спойлер HTML: теги и

– Потому, – ответил иностранец и прищуренными глазами поглядел в небо, где, предчувствуя вечернюю прохладу, бесшумно чертили черные птицы, – что Аннушка уже купила подсолнечное масло, и не только купила, но даже разлила.

 details < display: inline;/* текст на текущей строке */ > details[open] < display: contents;/* спрятанный текст на текущей строке (в Google Chrome отсутствует реализация на момент написания статьи) */ > details summary < list-style-type: "[. ]";/* такие слова, как «Ещё», «Читать дальше», «Нажать» лучше вносить в list-style-type, чтобы они не были видны в браузерах, не поддерживающих тег details (в Google Chrome отсутствует реализация на момент написания статьи) */ color: blue; cursor: pointer; > details[open] summary Текст 
скрытое/показанное содержимое

В ряде браузеров нельзя сделать inline-элементом

Текст до тега

.

  Текст 
Метка
 скрытое/показанное содержимое
 Текст

Вложенный в тег

Нажать [Закрыть] скрытое/показанное содержимое

 details:not([open]) summary small  display: none; > details[open] summary small 
 Нажать [Закрыть]  скрытое/показанное содержимое
 

  
скрытое/показанное содержимое
 

  
 
Заголовок 1
 
Содержимое 1
  
Заголовок 2
 
Содержимое 2
 
 

 details summary < width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;transition: color .3s; /* плавная смена цвета */ cursor: pointer; /* изменение курсора при наведении */ > details summary:hover, details[open] summary 
Нажать
 скрытое/показанное содержимое
 

  
скрытое/показанное содержимое
 

  
Нажать
 скрытое/показанное содержимое
 

  
Нажать
 скрытое/показанное содержимое
 

 div < position: relative; > details, summary < display: inline; >details[open] < display: contents; >details[open]::after < /* пространство для записи "СВЕРНУТЬ" */ display: block; content: "\00a0"; > summary < color: gray; cursor: pointer; >details[open] summary < position: absolute; /* переместить запись "СВЕРНУТЬ" вниз 
*/ bottom: 0; left: 0; > summary::before < content: "ЕЩЁ"; >details[open] summary::before < content: "СВЕРНУТЬ"; >summary::-webkit-details-marker 
Текст 
скрытое/показанное содержимое
 

 details < display: block; border: 1px solid silver; border-radius: 4px; padding: .5em; >details summary < display: list-item; margin: -.5em; padding: .5em; >details[open] > summary 
Cпрятать спойлер и текст под спойлер
 Текст 
Спрятать текст под спойлер
 Текст