Установка:
Стили <head> и </head> :
Code
<style type="text/css">
h2.acc_trigger {
padding: 0; margin: 0 0 5px 0;
background: url(http://img716.imageshack.us/img716/2182/h2triggera.gif) no-repeat;
height: 46px; line-height: 46px;
width: 500px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.acc_trigger a {
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.acc_container .block {
padding: 20px;
}
</syle>
Оживляем с помощью jQuery. Вставляем это между <head> и
</head>:
Code
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
Аккордеон активируется с помощью этого кода:
Code
<div class="container">
<h2 class="acc_trigger"><a href="#">Ваш текст</a></h2>
<div class="acc_container">
<div class="block">
<h3>Ваш текст</h3>
<a href="ссылка"><img src="картинка" alt="" /></a>
<p>Ваш текст </p>
</div>
</div>
</div>
Шрину аккордеона то это можно исправить.
Нужно вместо "width: 500px;" вставить "width: 498px;" или другое значение.
То-есть укоротить ширину.
У кого не подключён jQuery. Поставь этот код в <body> и аккордеон будет работать.
Code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
На uCoz-e аккордеон работает и без этого кода. 
