Как скрыть часть текста на странице, чтобы при нажатии он открывался?

@Provizor-071 · Регистрация: 08.06.2016

здравствуйте! Не разбираюсь в скриптах совершенно. Развиваю сайт на вордпресс. На страницы категорий добавил текст, который идет перед началом списка анонсов. Но текст вышел довольно большой и потому далеко не каждый узнает, что под ним идет список новостей. Хочу скрыть часть текста. Конечно, есть в интернете разные варианты решения этой проблемы, но они слишком не подходящие... Хотелось бы сделать все красиво, вот как, например, на Розетке:
http://rozetka.com.ua/
Особенно нравится эффект плавного исчезновения текста.
Конечно никто для меня "особенного" не станет здесь писать отдельно такой код. Но может есть готовое подобное решение? Или же может посоветуйте куда лучше обратиться, где бы за деньги могли сделать вот такую одноразовую работу? Спасибо.

@boilzzz · 18.03.2017, 17:47

песочница

CSS

div{
  overflow: hidden;
  height:200px;
  width:100%;
  transition:all 0.5s;
}
#link{
  float:right;
 
}
.open{
  height:500px;
  
}

Javascript

var link = document.getElementById("link"),
box = document.getElementById("box");
link.onclick = function(){
box.classList.add("open");
}

HTML5

1
2

<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>

@Provizor-071 · 18.03.2017, 20:51 **[ТС]**

Что-то не получается. Код стиля добавил в файл стилей.
Javascript взял в <script></script>

Код

<script>var link = document.getElementById("link"),
box = document.getElementById("box");
link.onclick = function(){
box.classList.add("open");
}</script>

и поместил в конец редактируемой страницы.

А вот этим - <div id="box">Текст</div>
<a id="link" href="#">Читать далее</a> - обвел весь текст

@boilzzz · 18.03.2017, 22:38

Provizor-071, откройте консоль с ошибками и посмотрите что не так, f12

@Provizor-071 · 18.03.2017, 23:03 **[ТС]**

спасибо! Буду мозговать!

Dmitry · 18.03.2017, 23:09

HTML5

1	<span id=secret_text>текст, который будет прятаться</span>

правда, про span не совсекм уверен, но если использовать div - то точно...

Javascript

$("#secret_text").hide(1000);  // этот код прячет скрытый текст
 
 
$("#secret_text").show(1000);   // этот код показывает скрытый текст

@boilzzz · 19.03.2017, 13:54

Dmitry, Вы же понимаете что привели код jquery, и что надо объяснять это ТС'у.

@Provizor-071 · 19.03.2017, 14:24 **[ТС]**

boilzzz
Вообще ума не приложу почему не работает...((

@boilzzz · 19.03.2017, 14:30

откройте консоль сделайте скриншот и скинте сюда

@Provizor-071 · 19.03.2017, 18:33 **[ТС]**

вот есть одна ошибка, но она не связана с это. Эта ошибка есть и на других страницах, она связана в партнерской программой... даже не в курсе был
http://oi68.tinypic.com/wvu8tv.jpg

@boilzzz · 19.03.2017, 21:26

Provizor-071, а адрес сайта можете предоставить? будет проще разбираться

@Provizor-071 · 19.03.2017, 22:27 **[ТС]**

нет, к сожалению, не могу...(

@Sayger · 08.04.2017, 23:15

Специально для тебя регистрировался на этой форме!
VK
Я слегка доработал, сейчас все работает. Удачи!

HTML5

<div class="description">Игра создана по мотивам сказки Алиса в Стране Чудес. Сказка была написана Чарльзом Лютвиджем Доджсоном изданная в 1865 году. В ней рассказывается об одной маленькой девочки по имени Алиса, которая очень любит мечтать. Однажды Алиса, увидела кролика который куда-то спешит, ей стало очень интересно и, она решила проследить за кроликом. Кролик постоянно, бегал вокруг ее дома и смотрел на часы. Вдруг его часы громко зазвенели и он побежал, к одному старому дереву где Алиса, в свое время проваливается и попадает в страну чудес.</div>
<a id="link" href="#">Читать далее</a>
<style>
.description{
    width: 250px;
    height: 100px;
    overflow: hidden;
}
.open{
  height: 50%;
  
}</style>
<script type="text/javascript">
var link = document.getElementById("link"),
box = document.querySelector(".description");
link.onclick = function(){
box.classList.add("open");
}
</script>

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,058
	19.03.2017, 21:26	11
	Provizor-071, а адрес сайта можете предоставить? будет проще разбираться 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
		1
	Как скрыть часть текста на странице, чтобы при нажатии он открывался? 18.03.2017, 14:47. Просмотров 13875. Ответов 12 Метки нет (Все метки) здравствуйте! Не разбираюсь в скриптах совершенно. Развиваю сайт на вордпресс. На страницы категорий добавил текст, который идет перед началом списка анонсов. Но текст вышел довольно большой и потому далеко не каждый узнает, что под ним идет список новостей. Хочу скрыть часть текста. Конечно, есть в интернете разные варианты решения этой проблемы, но они слишком не подходящие... Хотелось бы сделать все красиво, вот как, например, на Розетке: http://rozetka.com.ua/ Особенно нравится эффект плавного исчезновения текста. Конечно никто для меня "особенного" не станет здесь писать отдельно такой код. Но может есть готовое подобное решение? Или же может посоветуйте куда лучше обратиться, где бы за деньги могли сделать вот такую одноразовую работу? Спасибо. 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
	18.03.2017, 20:51 [ТС]	3
	Что-то не получается. Код стиля добавил в файл стилей. Javascript взял в <script></script> Код <script>var link = document.getElementById("link"), box = document.getElementById("box"); link.onclick = function(){ box.classList.add("open"); }</script> и поместил в конец редактируемой страницы. А вот этим - <div id="box">Текст</div> <a id="link" href="#">Читать далее</a> - обвел весь текст 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,058
	18.03.2017, 22:38	4
	Provizor-071, откройте консоль с ошибками и посмотрите что не так, f12 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
	18.03.2017, 23:03 [ТС]	5
	спасибо! Буду мозговать! 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,058
	19.03.2017, 13:54	7
	Dmitry, Вы же понимаете что привели код jquery, и что надо объяснять это ТС'у. 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
	19.03.2017, 14:24 [ТС]	8
	boilzzz Вообще ума не приложу почему не работает...(( 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,058
	19.03.2017, 14:30	9
	откройте консоль сделайте скриншот и скинте сюда 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
	19.03.2017, 18:33 [ТС]	10
	вот есть одна ошибка, но она не связана с это. Эта ошибка есть и на других страницах, она связана в партнерской программой... даже не в курсе был http://oi68.tinypic.com/wvu8tv.jpg 0

@Provizor-071 1 / 1 / 0 Регистрация: 08.06.2016 Сообщений: 108
	19.03.2017, 22:27 [ТС]	12
	нет, к сожалению, не могу...( 0

Опции темы

Как скрыть часть текста на странице, чтобы при нажатии он открывался?

Решение