Отличный jQuery-эффект, который и выглядит красиво, и место экономит не слабо.
0. Подключаем jQuery (Если у Вас DLE 9.0 — пропустите этот шаг)
Перед:
</head>
Добавляем
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
1. Открываем страницу (templates/шаблон/main.tpl)
После:
<body>
Вставляем:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler').hide()
$('.pressit').click(function(){
$('.spoiler').slideToggle("slow");
})
})
</script>
2.в нужном месте делаем вывод
<!-- jquery slidetoggle -->
<div class="pressit" style="color: #6F6F6F; text-decoration: underline;">нажми меня</div>
<div class="spoiler">
Здесь контент блока
</div>
И все, клик по «нажми меня» приведет к тому, что плавно развернется div с текстом «Здесь контент блока» Повторный клик — и div столь же плавно сворачивается.
Вставлять div с классом spoiler нужно в том месте, где вы хотите выводить слой с текстом.
Если вам нужно несколько таких анимационных эффектов, создайте перед head-ом несколько функций с разными именами: spoiler2, pressit2 и соответственно смените имена в div.