Удобный вид материалов для модуля FAQ

<div class="accordion">$BODY$</div>

<section id="$ID$">
<h2><a href="#$ID$">$TITLE$</a></h2>
<div><?if($ANSWER$)?><p>$ANSWER$</p><?else?><i>Еще нет ответа на этот вопрос.</i><?endif?></div></section>

.accordion{
background-color:none;
border:none;
width: 600px; /*-Изменяем под свои размеры-*/
padding:0px;
margin: 50px auto;
}
.accordion section {
margin:5px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;  
}
.accordion h2, .accordion p{margin: 0;}
.accordion p{padding: 10px;}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans';
padding: 10px;
color: #333;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a:hover {background: #fff;}
.accordion h2 + div {
height: 0;
overflow: hidden;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
.accordion :target h2 a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #666;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.accordion :target h2 + div {height: 100px;}