Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.92/75: Рейтинг темы: голосов - 75, средняя оценка - 4.92
1 / 1 / 0
Регистрация: 08.06.2016
Сообщений: 108
1

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

18.03.2017, 14:47. Просмотров 13875. Ответов 12
Метки нет (Все метки)

здравствуйте! Не разбираюсь в скриптах совершенно. Развиваю сайт на вордпресс. На страницы категорий добавил текст, который идет перед началом списка анонсов. Но текст вышел довольно большой и потому далеко не каждый узнает, что под ним идет список новостей. Хочу скрыть часть текста. Конечно, есть в интернете разные варианты решения этой проблемы, но они слишком не подходящие... Хотелось бы сделать все красиво, вот как, например, на Розетке:
http://rozetka.com.ua/
Особенно нравится эффект плавного исчезновения текста.
Конечно никто для меня "особенного" не станет здесь писать отдельно такой код. Но может есть готовое подобное решение? Или же может посоветуйте куда лучше обратиться, где бы за деньги могли сделать вот такую одноразовую работу? Спасибо.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.03.2017, 14:47
Ответы с готовыми решениями:

Как сделать, чтобы при нажатии на правую сторону, открывался mbox, и на левую, открывался другой mbox
У меня есть картинка в окне и там есть 2 человека в той картинке, я хочу сделать, чтобы нажав на...

Как сделать, чтобы при нажатии на Label открывался MS Word?
Как сделать, чтобы при нажатии на Label открывался документ MS Word? Если не трудно, напишите...

Как сделать чтобы при нажатии на кнопку открывался фаил расширением .exe?
Как сделать чтобы при нажатии на кнопку открывался фаил расширением .exe?

Как сделать, чтобы файл *.bat при нажатии кнопки открывался как *.txt?
Как сделать, чтобы файл *.bat при нажатии кнопки открывался как *.txt?

12
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
18.03.2017, 17:47 2
Лучший ответ Сообщение было отмечено Provizor-071 как решение

Решение

песочница
CSS
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;
  
}
Javascript
1
2
3
4
5
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>
0
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
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
18.03.2017, 22:38 4
Provizor-071, откройте консоль с ошибками и посмотрите что не так, f12
0
1 / 1 / 0
Регистрация: 08.06.2016
Сообщений: 108
18.03.2017, 23:03  [ТС] 5
спасибо! Буду мозговать!
0
Эксперт по компьютерным сетямЭксперт NIX
12135 / 7017 / 709
Регистрация: 09.09.2009
Сообщений: 27,515
18.03.2017, 23:09 6
HTML5
1
<span id=secret_text>текст, который будет прятаться</span>
правда, про span не совсекм уверен, но если использовать div - то точно...

Javascript
1
2
3
4
$("#secret_text").hide(1000);  // этот код прячет скрытый текст
 
 
$("#secret_text").show(1000);   // этот код показывает скрытый текст
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
19.03.2017, 13:54 7
Dmitry, Вы же понимаете что привели код jquery, и что надо объяснять это ТС'у.
0
1 / 1 / 0
Регистрация: 08.06.2016
Сообщений: 108
19.03.2017, 14:24  [ТС] 8
boilzzz
Вообще ума не приложу почему не работает...((
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
19.03.2017, 14:30 9
откройте консоль сделайте скриншот и скинте сюда
0
1 / 1 / 0
Регистрация: 08.06.2016
Сообщений: 108
19.03.2017, 18:33  [ТС] 10
вот есть одна ошибка, но она не связана с это. Эта ошибка есть и на других страницах, она связана в партнерской программой... даже не в курсе был
http://oi68.tinypic.com/wvu8tv.jpg
0
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
19.03.2017, 21:26 11
Provizor-071, а адрес сайта можете предоставить? будет проще разбираться
0
1 / 1 / 0
Регистрация: 08.06.2016
Сообщений: 108
19.03.2017, 22:27  [ТС] 12
нет, к сожалению, не могу...(
0
0 / 0 / 0
Регистрация: 08.04.2017
Сообщений: 1
08.04.2017, 23:15 13
Специально для тебя регистрировался на этой форме!
VK
Я слегка доработал, сейчас все работает. Удачи!
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.04.2017, 23:15

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как сделать, чтобы при нажатии на кнопку Messagebox открывался только один раз?
Как сделать что-бы когда при нажатии на кнопку Messagebox открывался только один раз (пока на...

Как сделать так, чтобы при нажатии на клавишу в c++ builder открывался файл в access?
Как сделать так,чтобы при нажатии на клавишу в c++ builder открывался файл в access???? Напишите...

Как сделать так,чтобы при нажатии на клавишу в c++ builder открывался файл в powerpoint?
Как сделать так,чтобы при нажатии на клавишу в c++ builder открывался файл в powerpoint????...

Надо чтобы при нажатии на кнопку открывался CHM файл
Надо чтобы при нажатии на кнопку открывался CHM файл


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.