Спойлер для новостного блока

[7Lexus]

Здравствуйте верховный главнокомандующий!

Опять я, и опять спойлер

Это код:

Код:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.top
{
font-family: Verdana;
width: auto;
display: block;
margin-right: 123px;
padding:6px 5px 5px;
font-size:14px;
color:#fff;
background:#44809a;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.togblock {
font-family: Verdana; font-size:12px;display:none;text-align:justify;padding:10px 10px;background:#ebf1f4;
}

.tog {
position: absolute;
background-color: #d8e3e7;
font-family:Verdana;
text-decoration:none;
text-align:center;
font-size: 12px;
color: black;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
cursor:pointer;
padding:5px 5px;
top: 10px;
right: 10px;
width:150;

}
.tog:hover {
cursor:pointer;background-color:#80c0ff;color:black;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {$('#toglink0').click(
function() {
if ( jQuery. browser .msie && parseInt(jQuery. browser .version) == 6) {
if ($('#togblock1').css("display")=="block") {$('#togblock0').css("display", "none");
} else {$('#togblock0').css("display", "block");
}
} else {$('#togblock0').toggle("fast");
}
if ($('#toglink0').text()=='читать дальше...') {$('#toglink0').text('...скрыть');
} else {$('#toglink0').text('читать дальше...');
}
});
});
</script>

<span class="top"><font color="yellow">06.06.2013 -</font> Новости, которые никого не удивили.</span>
<a class="tog" href="javascript:void(0)" id="toglink0">читать дальше...</a>
<div class="togblock" id="togblock0">
<p>Бывший президент Венесуэлы Уго Чавес был посмертно удостоен национальной премии в области журналистики. Об этом 6 июня сообщает <a href="http://www.ap.org/" target="_blank" class="source">Associated Press</a>.</p>
<p>В фонде, присуждающем премию, отметили, что бывший президент был удостоен награды за то, что «вернул слово угнетенным всего мира», и за то, что вел «нескончаемую борьбу с ложью в СМИ».</p>
<p>Как отмечает AP, выдвижение Чавеса на премию вызвало неоднозначную реакцию в Венесуэле. Еще при жизни Чавеса, напоминает агентство, международные правозащитные организации неоднократно обвиняли его в ограничении свободы прессы.</p>
<p>Агентство подчеркивает, что жюри фонда, присуждавшего премию было сформировано из журналистов и академиков, поддерживающих курс действующего правительства.</p>
<p>Уго Чавес был президентом Венесуэлы на протяжении 14 лет. Он умер 5 марта 2013 года, спустя полгода после очередной победы на президентских выборах. Причиной смерти политика стал рак, с которым он боролся на протяжении последних двух лет жизни.</p>
</ div >

Как сделать, чтобы можно было организовать несколько таких раскрывающихся блоков друг под другом?

Визуальный пример здесь - admshel-forum.ucoz.ru/publ/menu/1-1-0-2

[Admin]

Что-то в вашем примере кнопка "читать дальше..." уехала вниз.


Где Вы достали такой "кривой" и не универсальный скрипт?

Пришлось очень многое изменить, т.к. много лишнего CSS и id для каждого элемента совсем не нужны.

Вот что у меня получилось:

Код:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.top {
position:relative;
font-family:Verdana;
padding:6px 5px 5px;
font-size:14px;
color:#fff;
background:#44809a;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

.togblock {
font-family: Verdana;
font-size:12px;
display:none;
text-align:justify;
padding:10px 10px;
background:#ebf1f4;
}

.tog {
position:absolute;
display:block;
background-color:#d8e3e7;
text-align:center;
font-size:12px;
color:black;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
cursor:pointer;
padding:5px 5px;
top:2px;
right:2px;
width:150px;
}
.tog:hover { background-color:#80c0ff; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.tog').text('читать дальше...');
$('.tog').click( function() {
if ( jQuery. browser .msie && parseInt(jQuery. browser .version) == 6) {
  if ($(this).parents().children('.togblock').css("display")=="block")  $(this).parents().children('.togblock').css("display", "none");
  else $(this).parents().children('.togblock').css("display", "block");
}
else $(this).parents().children('.togblock').toggle("fast");

if ($(this).text()=='читать дальше...') $(this).text('...скрыть');
else $(this).text('читать дальше...');
});
});
</script>

<div>
<div class="top"><font color="yellow">06.06.2013 -</font> Новости, которые никого не удивили. <span class="tog"></span></div>
<div class="togblock">
<p>Бывший президент Венесуэлы Уго Чавес был посмертно удостоен национальной премии в области журналистики. Об этом 6 июня сообщает <a href="http://www.ap.org/" target="_blank" class="source">Associated Press</a>.</p>
<p>В фонде, присуждающем премию, отметили, что бывший президент был удостоен награды за то, что «вернул слово угнетенным всего мира», и за то, что вел «нескончаемую борьбу с ложью в СМИ».</p>
</div>
</div>

<div>
<div class="top"><font color="yellow">06.06.2013 -</font> Новости 2.<span class="tog"></span></div>
<div class="togblock">
<p>Как отмечает AP, выдвижение Чавеса на премию вызвало неоднозначную реакцию в Венесуэле. Еще при жизни Чавеса, напоминает агентство, международные правозащитные организации неоднократно обвиняли его в ограничении свободы прессы.</p>
<p>Агентство подчеркивает, что жюри фонда, присуждавшего премию было сформировано из журналистов и академиков, поддерживающих курс действующего правительства.</p>
</div>
</div>

<div>
<div class="top"><font color="yellow">06.06.2013 -</font> Новости 3.<span class="tog"></span></div>
<div class="togblock">
<p>Уго Чавес был президентом Венесуэлы на протяжении 14 лет. Он умер 5 марта 2013 года, спустя полгода после очередной победы на президентских выборах. Причиной смерти политика стал рак, с которым он боролся на протяжении последних двух лет жизни.</p>
</div>
</div>

[7Lexus]

Огромное спасибо за представленное решение!

(07.06.2013 12:42:07)Admin писал(а):  кнопка "читать дальше..." уехала вниз.

Это на юкозе она "кривляется"... а так-то везде ровно.
Ваш вариант безусловно лучше. И... если можно... как анимацию убрать вообще?

[Admin]

Для того чтобы убрать анимацию замените toggle("fast") на toggle(0) и все.

[7Lexus]

Спасибо большое. Поигрался с CSS, но остановился на вашем варианте.