Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как сделать div скрытия текста?

Как сделать div скрытия текста?

     24.01.2015    Общие вопросы, jQuery, Общие вопросы по PHP    3620

вопрос
Для сайта необходимо реализовать возможность скрытия текста под кнопкой «читать полностью». При клике на данную кнопку текст открывается на этой же странице. Пример — rozetka.com(точка)ua (текст в конце страницы)

Ответа пока нет

 

10 комментариев

ychelovek
Юзер

ychelovek - 24 января 2015 20:47 - 

<div id="myblock" style="
width:300px; 
height: 140px;
overflow-y:hidden;
">
Длинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текст
</div>
<div onclick="showdiv()" id="knopka">Показать полностью</div>
<script>
function showdiv()
{    
    document.getElementById('myblock').style.height='auto';    
}
</script>
Egor112
Юзер

Egor112 - 24 января 2015 21:32 -

А как сделать затемнение последней строки(как в примере?)
И как сделать обратный эффект? т.е после разворота появилась кнопка скрыть?
ychelovek
Юзер

ychelovek - 24 января 2015 21:41 -

щас напишу. афк мин 10
ychelovek
Юзер

ychelovek - 24 января 2015 22:03 - 

<style>
#myblock
{

    width:300px; 
height: 140px;
overflow-y:hidden;
}
#myblock:before {
content: '';
display: block;
width:300px; 
height: 140px;
position: absolute;
background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

}

#myblock.new:before {content:none;}

</style>

</head>
<body>


<div id="myblock">
Длинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текстДлинный длинный текст
</div>
<div onclick="showdiv()" id="knopka">Показать</div>
<script>
fl = 0;
function showdiv()
{    
    if (!fl)
    {
        document.getElementById('myblock').style.height='auto';    
        document.getElementById('knopka').innerHTML='Скрыть';    
        fl=1;
        document.getElementById('myblock').style.height='auto';    
        document.getElementById('myblock').className = 'new';
    }
    else
    {
        document.getElementById('myblock').style.height='140';            
        document.getElementById('knopka').innerHTML='Показать';    
        fl=0;        
        document.getElementById("myblock").className = "";
    }
    
}
</script>
Egor112
Юзер

Egor112 - 24 января 2015 22:36 -

не скрывает :/
скрывает только затемнение, а текст остается
Egor112
Юзер

Egor112 - 24 января 2015 22:36 -

не скрывает :/
скрывает только затемнение, а текст остается
ychelovek
Юзер

ychelovek - 24 января 2015 22:47 -

Посмотрите , у меня в хроме отлично работает
Egor112
Юзер

Egor112 - 24 января 2015 23:16 -

хм...теперь вроде работает.
Спасибо!!!
crakcen
Юзер

crakcen - 25 января 2015 01:37 -

а как сделать для блока внутри которого находится изображение 
<img src="img.jpg" alt="image">
ychelovek
Юзер

ychelovek - 26 января 2015 20:56 -

не понял вопроса... Если есть возможность показать/ нарисовать - покажите
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 11.03.2012 Гость  Общие вопросы, Хаки
 02.07.2012 region029  Общие вопросы
 22.10.2013 vek21  Общие вопросы, Модули, Ламерские вопросы
 27.10.2013 remont63  Общие вопросы
 06.11.2013 Global  Общие вопросы
 15.02.2014 Mihail9575  Общие вопросы
 11.06.2014 Е.Хрущёв  Общие вопросы
 06.09.2014 Wensome  Общие вопросы
 10.12.2014 OlegGaiduk  Общие вопросы, Шаблоны (TPL), Ламерские вопросы
 01.04.2015 chepic  Общие вопросы
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    Сегодня, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:37
    т.е. мне снести всё, что я уже загрузил как root, зайти под юзером и закачать снова?
    Видосы в директории upload можно хоть оставить? их там 80 Гб
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:17
    фтп обычный юзер а не root
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:15
    дэк только так и загружаю
  • Gordi | Как реализовать шифрование трафика? 3
    Фото Gordi
    Gordi
    Как реализовать шифрование трафика?
    18-11-2024, 14:14
    я тоже не понимаю....товарищ один, представитель хостинга сказал, что даже есть модули такие специальные под популярные цмс
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:13
    Gordi,
    через фтп загружай
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:11
    Привет Николай!
    Всегда загружал от root... посмотришь может? твой плагин тоже не виден ((
    или направь на путь истинный, пжст
наверх