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

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

вопрос

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

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

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

Юзер

125

ychelovek - 2015-04-0124 января 2015 20:47 - #40069

<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 - 2015-04-0124 января 2015 21:32 - #40075

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

Юзер

125

ychelovek - 2015-04-0124 января 2015 21:41 - #40076

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

Юзер

125

ychelovek - 2015-04-0124 января 2015 22:03 - #40078

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