Разворачивающийся текст

Zeferot · October 1, 2012

Подскажите как сделать чтобы новость на страничке показывалась не полностью, а только начало, далее кнопочка какая-нибудь, при нажатии на которую разворачивался остальной текст? Что то типа show/hide в joomla, сайт пишу сам, css нету. Заранее спасибо за помощь.

tius · October 1, 2012

при нажатии - это javascript.

css есть везде. javascript, в принципе, тоже (работа на стороне клиента, а не сервера).

Zeferot · October 1, 2012

ай не css а cms опечатался =)

И хотелось бы плавный show/hide как у joomla, а то у javascript он резко работает.

tius · October 1, 2012

гуглить "javascript animation"

Zeferot · October 1, 2012

Нашел подходящий скрипт

<html>

<head>

<title>Пример</title>

function one (objName) {

if ( $(objName).css('display') == 'none' ) {

$(objName).animate({height: 'show'}, 400);

} else {

$(objName).animate({height: 'hide'}, 200);

}

function two (objName) {

if ( $(objName).css('display') == 'none' ) {

$(objName).animate({height: 'show'}, 400);

} else {

$(objName).animate({height: 'hide'}, 200);

}

</script>

body {

background-color: #ffa999;

}

#1 {

background-color: #ffffff;

margin-left: 20%;

width: 70%;

border-radius: 4px;

border: 1px solid black;

}

#2 {

background-color: #ffffff;

margin-left: 20%;

width: 70%;

border-radius: 4px;

border: 1px solid black;

}

ul {

background-color: #ffffff;

border-radius: 4px;

border: 1px solid black;

text-align: left;

width: 15%;

position: absolute;

}

</style>

</head>

<body>

<ul>

<li><a href="#" onclick="one('#1'); return false">Пример №1</a></li>

<li><a href="#" onclick="two('#2'); return false">Пример №2</a></li>

</ul>

Пример №1</br>

</div>

Пример №2</br>

</div>

</body>

</html>

Но вот беда как его заставить работать так что бы например: идет начало статьи, потом троеточее, далее кнопка "читать полностью", а при ее нажатии кнопка пропадает, троеточее пропадает а плавно появляется статья целиком. А после статьи кнопка свернуть. Вот.

Zeferot · October 1, 2012

Всё =) разобрался =) спасибо =)

Sign In

Разворачивающийся текст

Question

Zeferot

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

tius

Link to comment

Share on other sites

Zeferot

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

Zeferot

Link to comment

Share on other sites

Zeferot

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information