Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы Как сделать div скрытия текста?

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


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

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

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


Комментарии пользователей (10)

ychelovek
2

125 | 23

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

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

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

ychelovek
2

125 | 23

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

щас напишу. афк мин 10

ychelovek
2

125 | 23

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

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

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

Egor112
8 | 1

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

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

ychelovek
2

125 | 23

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

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

Egor112
8 | 1

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

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

crakcen
6

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

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

ychelovek
2

125 | 23

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

не понял вопроса... Если есть возможность показать/ нарисовать - покажите

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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