Свернуть развернуть текст html

Прошу прощения много статей в интернете на эту тему но никак не могу сообразить

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

  • Вопрос задан более года назад
  • 2114 просмотров

AngReload, спасибо да работает но вот я не придусматрел такое ели я зачу поменять

karpos, код с пояснениями

Всю документацию по всяким штукам вроде slideToggle можно найти на сайте https://api.jquery.com/
Или на русском языке на вики-сайте jquery.page2page.ru
Поочередное разворачивание и сворачивание элементов

да огромное спасибо.
я в прошлый раз допустил ошибку

суть в то что pointer-box это родительский блок и если кликнуть случайно внутри него по любому месту он закроется а это не удобно если внутри блока много текста я решил ввести событие по клику по блок pointer
но тогда получается что блок pointer-text уже не является дочерним он следующий или предыдущий. с раскрытием и закрытием проблем не вознилом я просто .childrenпоменял на .prev . а вот как свернуть все не активные блоки опять не получается пробывал поменять на .prev не получилось

karpos, не пользуйтесь чужим кодом бездумно, посмотрите что он делает.

Что делает $(this).siblings() ? Он выбирает соседей кликнутого блока. В этом html:
this — это .pointer

Для него находим соседей, у него три соседа:
Так мы выбрали все блоки для сворачивания, то что нужно.

Но теперь HTML новый, что сделает всё тот же $(this).siblings() ? Он выбирает соседей кликнутого блока. В этом html:

Читайте также  Самый дешевый монитор 240 герц

this — это .pointer
Для него находим соседей, у него только один сосед
Очевидно, мы пошли куда-то не туда, ведь нам нужно было добраться до соседних .pointer-box

Совет:
Вы можете пользоваться console.log() для того чтобы понять как работает ваш код. Например:
— этот код покажет в консоли браузера коллекции элементов на каждом этапе. Так вы смогли бы сами сразу понять где ошиблись или куда идти дальше.

Чтобы их достичь, нужно сначала из this === .pointer добраться до .pointer-box
Это можно сделать с помощью метода parent() — http://jquery.page2page.ru/index.php5/Поиск_элемен.

Новый код $(this).parent().siblings()
this — это .pointer
Для него находим родителя

Ну и .children(".pointer-text") выберет в этих блоках именно то что нужно сверуть.

Но я бы переписал, чтобы не использовать метод prev():

Ну и вторую чать кода можно попроще сделать, без блужданий вперёд и назад:

Есть текст, который сворачивается по нажатию иконки и разворачивается. Мне нужно, чтобы он на экранах компьютера был обычным, без иконки, а в responsive версии сворачивался и разворачивался. Есть идеи как это реализовать?

2 ответа 2

Воспользуйтесь правилом @media .

  • По просьбе автора вопроса изменил на картинки.
  • Убрал span.read-more-button-icon за ненадобностью.

.read-more-button .read-more-button-icon и .read-more-state

.read-more-button .read-more-button-icon (если смотреть по моей реализации). – Nikita A. Slutsky 8 дек ’18 в 11:12

Инструкция скрыть часть текста и показать его при клике. Скачать готовый скрипт readmore.

  • ГлавнаяНовости статьиjQuery , Разные заметки разработчика Как свернуть развернуть текст на сайте. Скрипт.

Как свернуть развернуть текст на сайте. Скрипт.

  • 4.6/5
  • 8 оценок
Очень плохо! Плохо Нормально Хорошо Очень хорошо!
0% 0% 12.5% 12.5% 75%

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

Читайте также  Прога для раздачи вай фай с компа

Очень часто для экономии места на сайте, или же просто для более презентабельного вида, требуется показать пользователю только часть текста, то есть свернуть развернуть текст. Особенно часто я это применяю при разработке интернет магазина в категориях, то есть, если Вам нужно в описании категории свернуть большой текст и развернуть его при клике, показать полное описание, то данная статья именно то что вам нужно.

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

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

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

Функция самого простого вызова скрипта выглядит так:

Ссылка на основную публикацию
Adblock
detector