Свернуть или развернуть html

Как скрыть часть текста под катом и развернуть (свернуть) по кнопке на HTML и CSS

Задача. Необходимо сделать такой функционал для блока с контентом, который будет по умолчанию скрывать часть его контента, а при нажатии на текст «Развернуть» контент блока должен раскрываться полностью, а текст сам «Развернуть» должен измениться на «Свернуть». И обратно – при клике на «Свернуть» контент должен частично скрыться. Например, это может быть применено в каталоге с товарами, где отображаются в несколько строк какие-то метки для фильтрации товаров. Или нужно просто скрыть часть текста в статье или на главной.

«Под кат» означает «спрятать часть моей статьи» (вырезать, где cut — «резать» с англ.). Записи большого размера разбивают на две части: вводную часть и полный текст. Делается это, чтобы на главной странице сайта не было длинных постов, а только начало в несколько строк. Полную версию записи можно читать при клике на ссылку «Подробнее» и т.п.

CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».

Решение 1. Чтобы убрать контент под кат можно использовать лишь HTML + CSS. Для этого нужно будет сам контент обернуть в div и назначить свой класс. Добавить тег input типа чекбокс перед обернутым контентом. В конец контента добавить пустой див с еще одним своим классом. После обернутого контента добавить label. Вот HTML и CSS Код №1 для примера:

Источник

Справка : Сворачивание

Сворачивание позволяет скрыть любой элемент на странице с помощью специальной кнопки «свернуть/развернуть». Это также можно использовать для крупных таблиц и текстов.

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

Сворачивание таблицы [ ]

Добавьте код « mw-collapsible » как класс, чтобы в таблице появилась ссылка «свернуть/развернуть».

Сворачивание текста [ ]

Аналогично можно этот класс использовать для сворачивания текста внутри статьи.

div class="mw-collapsible"> Этот текст можно свернуть. div> 

Этот текст можно свернуть.

Свёрнутая по умолчанию таблица [ ]

Чтобы таблица изначально была свёрнута, используйте двойной код: « mw-collapsed » и « mw-collapsible ». Пример:

Скрытие спойлеров в тексте [ ]

Скрыть текст внутри статьи можно, используя двойной код: указанный в предыдущем разделе с добавлением кода « mw-collapsible-content ».

div class="mw-collapsible mw-collapsed" style="width:100%"> Этот текст предшествует скрытому тексту. div class="mw-collapsible-content"> Этот текст скрыт изначально. div>div> 

Этот текст предшествует скрытому тексту.

Настройка текста «свернуть/развернуть» [ ]

Можно добавить свой текст вместо стандартного «свернуть/развернуть». Для этого используйте код « data-expandtext » и « data-collapsetext ».

Кнопка «свернуть/развернуть» [ ]

Как вы заметили, ссылка «свернуть/развернуть» увеличивает ширину колонки таблицы, где она находится. Этого можно избежать, если вынести переключатель за пределы таблицы, что удобно сделать с помощью кнопки.

Если присвоить переключателю значение » mw-customcollapsible-myTable «, то при использовании кода » mw-customtoggle-myTable » это можно осуществить следующим образом:

См. также [ ]

Источник

Свернуть или развернуть div в JavaScript

jQuery — это легкая и очень быстрая библиотека javascript. Это упрощает использование JavaScript.

Тег div — это тег деления. Он используется для определения раздела в документе HTML. Он также действует как контейнер для других элементов HTML.

В этом руководстве мы свернем или развернем div с помощью jQuery .

Посмотрите пример, приведенный ниже.

fieldset class="click" >  legend class="buttonMain" style="cursor: pointer">Expandlegend> div class="content" style="display:none">  p>Lorem ipsum. p>  div> 

Приведенный выше HTML-код содержит некоторые элементы, включая тег div . Мы манипулируем div с помощью jQuery , чтобы сделать его сворачиваемым.

В jQuery методы show() и hide() используются для отображения или скрытия любого элемента в HTML.

Мы можем использовать эти функции, чтобы свернуть или развернуть тег div , как показано ниже.

$('.buttonMain').click(function()  if($(this).text()=='Expand')  $('.content').show();  $(this).text('Collapse');  > else   $('.content').hide();  $(this).text('Expand');  > >); 

Мы также можем указать скорость скрытия и отображения элементов с помощью параметра speed в этих функциях. Мы можем определить его значение как slow , fast или скорость в миллисекундах.

Copyright © 2023. All right reserved

Источник

Как на jQuery свернуть развернуть div?

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

Простой 2 комментария

 
Основные сведения 
блок который нужно свернуть или развернуть
 

 
Основные сведения
 
блок который нужно свернуть или развернуть
 

// $(document).ready(callback) запустит функцию callback когда весь документ загрузится $(document).ready(function() < // сразу при загрузке страницы нам нужно всё свернуть $(".slideT") // выбирает все slideT .hide(); // и скрывает их // и повесить обработчики событий которые в дальнейшем // будут делать всю работу по сворачиванию и разворачиванию $(".pointer") // выбирает все pointer .click(function () < // вешает обработчики события «клик» // эта функция запустится при клике на любой pointer // this в этой функции указывает на элемент по которому кликнули // тут мы развернём блок по которому кликнули $(this) // выбирает элемент по которому кликнули .children(".slideT") // находит его ребёнка с классом slideT .slideToggle("slow"); // запускает его медленное «переключение»* // *slideToggle - это переключение состояния свёрнуто или развёрнуто, // если элемент уже свёрнут, то развернёт. Или наоборот // а тут мы свернём все блоки, кроме того по которому кликнули $(this) // выбирает элемент по которому кликнули .siblings() // выбирает всех его соседей, кроме него самого .children(".slideT") // находит их детей с классом slideT .slideUp("slow"); // запускает их медленное сворачивание // если элементы уже свёрнуты, то slideUp ничего не сделает >); >)

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

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

  
Заголовок
 
здесь будет текст
 
 
Заголовок
 

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

  
Заголовок
 
здесь будет текст
 
 
Заголовок
 

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

 
Структура и органы управления образовательной организацией 
блок который нужно свернуть или развернуть
 
 
Документы
 
Образование
 
Образовательные стандарты

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

 
Заголовок
 
здесь будет текст
 
 
Заголовок
 

console.log($(this)); console.log($(this).siblings()); console.log($(this).siblings().children(".pointer-text"));

$(this) .parent() .siblings() .children(".pointer-text") .slideUp("show") .prev(".pointer").toggleClass("pointer-active");

var pointerBoxSiblings = $(this).parent().siblings(); pointerBoxSiblings .children(".pointer") .toggleClass("pointer-active"); pointerBoxSiblings .children(".pointer-text") .slideUp("show");

$(this) .toggleClass("pointer-active") .next(".pointer-text") .slideToggle("show");