Как спрятать часть текста на CSS или кнопка»Еще»?
Есть блок в котором находится описание товара. Возможно ли сделать с помощью свойств CSS, если текст больше блока, то часть его скрывается и появляется кнопка, по нажатию на которую блок с текстом полностью открывается. Сейчас в голове только вариант с помощью overflow: hidden и js или label, input. менять высоту блока.
Отслеживать
задан 22 ноя 2016 в 12:14
4,916 3 3 золотых знака 17 17 серебряных знаков 37 37 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно вот так сделать
button .text < display: block; width: 300px; height: 10px; border: 1px solid black; padding: 5px; margin-top: 5px; outline: none; overflow: hidden; >.text:focus, button:focus ~ .text
Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим! Отслеживать
ответ дан 28 дек 2016 в 19:32
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
Если Вы хотите именно кнопку, чтобы на неё кликать, то тут без js не обойтись. На чистом CSS можно сделать следующее: по умолчанию задать блоку какую-то строгую высоту и overflow: hidden, а по наведению (hover) менять высоту на auto.
#block < border: 1px solid black; width: 200px; height: 100px; overflow: hidden; padding: 5px 10px; font-size: 14px; >#block:hover
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Как скрыть часть текста?
Здравствуйте,
У меня на странице имеется большой текст, но мне нужно часть его спрятать, а чтоб при клике он показывался.
Видел когда то что некоторые делали как то чтоб низу текст как бы мутнел, а при клике он открывался полностью
Как мне это можно реализовать?, заранее большое спасибо!
- Вопрос задан более трёх лет назад
- 5747 просмотров
Комментировать
Решения вопроса 1
Тыжверстальщик! Наверстай мне упущенное.
Так? https://jsfiddle.net/webirus/k058u9ct/
$(this).toggleClass(‘active’); лишний, он для моего скрипта использовался, удалите
Ответ написан более трёх лет назад
Нравится 4 3 комментария
VaneS Ri_Lax @vanesxl Автор вопроса
Спасибо! Я ответ нашел вот тут https://habrahabr.ru/post/241485/
В принципе и меня тоже самое получается
как можно реализовать эту идею на сайте с шаблоном Jupiter и плагином Visual Composer?? Что бы не делал, не работает (((
У меня тоже не работает на шаблоне jollyany. Хээээлп!
Ответы на вопрос 2
Nik Gubin @gubin_niko
Вариантов много, зависят некоторые от особенностей поведения и вёрстки.
Но вот, как я делаю чаще подобную задачу:
— Оборачиваем текст в контейнер (по умолчанию выставляем ему высоту) и внутри контейнера кладём ещё один div-блок (пропишите ему свойства, абсолютное позиционирование внизу контейнера, сделайте background градиентом или в фотошопе сделайте нужный спрайт)
— Слушаем клик по контейнеру с текстом и после клика делаем .slideDown() одновременно скрывая div-блок с градиентом (можно сразу просто убрать, а можно fideOut() прописать)
При повторном клике по тексту можно проверить, открыт он или нет (можно вешать какой-нибудь класс для проверки), и если открыт, то делаем animate(, 300) и убираем класс, если ставили.
Если что-то не понятно, пишите, помогу чем смогу 😉
P.S. Может быть есть вариант анимации на css3, но я не очень пока в ней разбираюсь.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Можешь просто использовать плаг https://github.com/WahaWaher/morecontent-js Подключаешь скрипт и инитишь с ограничением по высоте $(selector).moreContent(< height: 300 >); Тут пример с замутнением: https://wahawaher.ru/morecontent-js/
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- JavaScript
- +1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
- 1 подписчик
- 2 часа назад
- 21 просмотр
Спрятать часть текста «Читать далее» на сайте
Чтоб работало на всех страницах и категориях, то прописываем вверх или в низ сайта.
Это отвечает за скрытие, что в теле описание ставится, где по клику все открывается, и ниже будет написано, закрыть, хотя все в ручную прописываем.
Читать далее.
Больше не чего не нужно, теперь на всей площадке вы можете его пременять.
Как скрыть часть текста на странице, чтобы при нажатии он открывался?
здравствуйте! Не разбираюсь в скриптах совершенно. Развиваю сайт на вордпресс. На страницы категорий добавил текст, который идет перед началом списка анонсов. Но текст вышел довольно большой и потому далеко не каждый узнает, что под ним идет список новостей. Хочу скрыть часть текста. Конечно, есть в интернете разные варианты решения этой проблемы, но они слишком не подходящие. Хотелось бы сделать все красиво, вот как, например, на Розетке:
http://rozetka.com.ua/
Особенно нравится эффект плавного исчезновения текста.
Конечно никто для меня «особенного» не станет здесь писать отдельно такой код. Но может есть готовое подобное решение? Или же может посоветуйте куда лучше обратиться, где бы за деньги могли сделать вот такую одноразовую работу? Спасибо.
Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать, чтобы при нажатии на правую сторону, открывался mbox, и на левую, открывался другой mbox
У меня есть картинка в окне и там есть 2 человека в той картинке, я хочу сделать, чтобы нажав на.
Как сделать, чтобы при нажатии на Label открывался MS Word?
Как сделать, чтобы при нажатии на Label открывался документ MS Word? Если не трудно, напишите.
Как сделать чтобы при нажатии на кнопку открывался фаил расширением .exe?
Как сделать чтобы при нажатии на кнопку открывался фаил расширением .exe?
Как сделать, чтобы файл *.bat при нажатии кнопки открывался как *.txt?
Как сделать, чтобы файл *.bat при нажатии кнопки открывался как *.txt?
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,057
Сообщение было отмечено Provizor-071 как решение
Решение
1 2 3 4 5 6 7 8 9 10 11 12 13 14
div{ overflow: hidden; height:200px; width:100%; transition:all 0.5s; } #link{ float:right; } .open{ height:500px; }
1 2 3 4 5
var link = document.getElementById("link"), box = document.getElementById("box"); link.onclick = function(){ box.classList.add("open"); }
div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!/div> a id="link" href="#">Читать далее/a>