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

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


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

вопрос
Для сайта необходимо реализовать возможность скрытия текста под кнопкой «читать полностью». При клике на данную кнопку текст открывается на этой же странице. Пример — 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 -

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

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

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

наверх