accordeon не работает
 

проблема с аккордионом.

<script type="text/javascript">
$(document).ready(function(){
$(".accordion h2:first").addClass("active");
$(".accordion ul:not(:first)").hide();


$(".accordion h2").click(function(){
$(this).next("ul").slideToggle("slow")
.siblings("ul:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h2").removeClass("active");
});

});


.accordion {
position:relative;
top:0px;
left:0px;
width: 335px;
height:auto;
margin:10px;
}
.accordion h2{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
color:#34b9fe;
border-bottom: 3px dotted #34b9fe;
display:inline;
cursor: pointer;
}

.accordion h2:hover {
color:#333;
border-bottom: 3px dotted #333;
}
.accordion h2.active {
color:#333;
border-bottom: 3px dotted #333;

}
.accordion ul {
margin: 0;
padding: 10px 15px 20px;
}
.accordion li{
list-style-type:none;
line-height:24px;
}
.accordion li > a{
color:#33b9fd;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
text-align:left;
}
.accordion li > a:hover{
color:#333333;
text-decoration:none;
}

из за display:inline; блоки съезжающийся в строку(естественно.) Не как не могу правильно добавить еще один css <div> класс для h2.
Помогите дураку?:help:

Нет господа я серьезно не могу правило сделать этот JQ блок. дурацкая заморочка из пурктирной линии меня уже достала.