hi,
I apologise for repeating this jquery accordian question as I am just starting out using jquery & there are a few things I don’t quite understand. I want to start this question from scratch. I am using this basic accordian, hope it is correct, this is the link for the accordian
Thanks
$(document).ready(function(){
$("#accordion .va-heading");
$("#accordion .va-content:not(:first)").hide();
$("#accordion").click(function(){
$(this).next("va-content").slideToggle("slow")
.siblings("va-content:visible").slideUp("slow");
$(this).toggleClass(".va-content");
$(this).siblings("va-heading");
});
});
Each of the va-slice, va-heading & va-content will have a different color.
I want the accordion to dynamically resize to the content it contains, I found this code on the jquery ui website but am not sure where it goes in the above code
$( ".selector" ).accordion({ autoHeight: false });
HTML
<div id="container">
<div id="photo"><img src="images/bryanPic2.jpg" alt="massage therapist bryan photo"></div>
<div id="va-accordian">
<div class="va-slice va-slice-1">
<h2 class="va-heading">Welcome</h2>
<div class="va-content">
<p>Sports & relaxation massage will dramatically improve the quality of your life by relieving occupational, postural & emotional <br>stress.</p>
<p>Sports massage combines deep tissue work & stretching techniques to avoid injury & its recurrence. Regular massage relieves <br>unbalanced muscles tensions, improving muscular functions & performance.</p>
<p>Relaxation massage is a perfect way to banish the stress & fatigue you have accumulated throughout your busy life. It is a very <br>gentle form of body work which can have a profound effect on the mind & body.</p>
<p>I treat everybody with a high degree of care & attention. I always consider your work, your life situation & your sport when <br>treating you. My approach is holistic, my treatments are unique & designed specificaly for you.</p>
<p>You will feel sensational & experience an unbroken night's sleep after just one of my treatments</p>
<p>Sports & relaxation massage can:</p>
<ul>
<li>Reduce stress & anxiety</li>
</ul>
</div><!-- end va-content -->
</div><!-- end va-slice -->
<div class="va-slice va-slice-2">
<h2 class="va-heading">About</h2>
<div class="va-content">
</div><!-- end va-content -->
</div><!-- end va-slice-2 -->
<div class="va-slice va-slice-3">
<h2 class="va-heading">What To Expect</h2>
<div class="va-content">
</div><!-- end va-content -->
</div><!-- end va-slice-3 -->
<div class="va-slice va-slice-4">
<h2 class="va-heading">Prices</h2>
<div class="va-content">
</div><!-- end va-content -->
</div><!-- end va-slice-4 -->
<div class="va-slice va-slice-5">
<h2 class="va-heading">Contact</h2>
<div class="va-content">
</div><!-- end va-content -->
</div><!-- end va-slice-5 -->
</div><!-- end va-accordian -->
</div><!-- end container -->
CSS
body{
color:#fff;
font-size:62.5%;
margin:0;
}
#container {width:725px; margin:0px auto;}
#photo {width:725px; height:360px; margin:-75px auto -1px;}
#va-accordian{margin:0 auto; height:auto;}
.va-slice{cursor:pointer; margin:0 auto; width:725px; overflow:hidden;
height:auto;}
.va-slice-1{background:#394853 url(../images/blue-1.jpg) repeat;}
.va-slice-2{background:#9eaeb3 url(../images/blue-2.jpg) repeat;}
.va-slice-3{background:#99bcbc url(../images/blue-3.jpg) repeat;}
.va-slice-4{background:#5d9b8c url(../images/green-1.jpg) repeat;}
.va-slice-5{background:#4a7b6f url(../images/green-2.jpg) repeat;}
.va-heading{font-family: 'Lato', sans-serif; text-transform:uppercase; font-size:1.8em; margin-left:40px; color:#fff;}
.va-content{display:none; margin-left:40px; height:auto;}
.va-slice p{ font-size:1.2em; font-style: normal; color:white; font-family:'Lato', sans-serif; line-height:140%; text-align:justify; margin-right:5px;}