How to adjust the height of jquery accordian

JavaScript
1

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 &amp; relaxation massage will dramatically improve the quality of your life by relieving occupational, postural &amp; emotional            <br>stress.</p>	
        <p>Sports massage combines deep tissue work &amp; stretching techniques to avoid injury &amp; its recurrence. Regular massage relieves            <br>unbalanced muscles tensions, improving muscular functions &amp; performance.</p>
        <p>Relaxation massage is a perfect way to banish the stress &amp; 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 &amp; body.</p>
        <p>I treat everybody with a high degree of care &amp; attention. I always consider your work, your life situation &amp; your sport when           <br>treating you. My approach is holistic, my treatments are unique &amp; designed specificaly for you.</p>
        <p>You will feel sensational &amp; experience an unbroken night's sleep after just one of my treatments</p>
        <p>Sports &amp; relaxation massage can:</p>
        <ul>
        	<li>Reduce stress &amp; 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;}
2

What you have posted is a bit confusing.

The jquery accordion is part of the jquery UI (user Interface). This has its own .js file which you have not included. The “autoHeight” property to which you refer is part of that.

What you seem to be doing is implement you own accordion effect by responding to click events and then showing content which was previously hidden. But the selector you are using does not refer to an element on the page.

You have

$("#accordion").click(function(){

#accordion is the selector and identifies an element with an id of accordion. But you do not have such an is in you html.

You could go two ways. Either use the jquery UI accordion or write you own.

3

ok, I’ll start over

$(document).ready(function() {
       $('#va-accordion .va-content').hide();
       $('#va-accordion .va-slice va-slice-1').click(function(){
               $('#va-accordion .va-content').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});

what I am not sure about is the

.click(function()

I have .va-slice va-slice-1 through to va-slice va-slice-5, how would this be added to the .click(function(). Hopefully this time round the code is ok, apologies if it is not
New link

4

When an element contains multiple class names, any one selector will match that element.

So the click event can be assigned with just:


$('.va-slice').click(function(){
5

I have changed the click event but it doesn’t seem to work & I have no idea why, can someone explain why, the new code for the accordian is as follows

$(document).ready(function() {
       $('#va-accordion .va-content').hide();
       $('.va-slice').click(function(){
               $('#va-accordion .va-content').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});

thanks

6

Couple of things which are not help the situation

Your html is

<div class="va-slice va-slice-1">
        <h2 class="va-heading">Welcome</h2>
        <div class="va-content">
        <p>Sports &amp; relaxation massage will dramatically improve the quality of your life by relieving occupational, postural &amp; emotional            <br>stress.</p>
        <p>Sports massage combines deep tissue work &amp; stretching techniques to avoid injury &amp; its recurrence. Regular massage relieves            <br>unbalanced muscles tensions, improving muscular functions &amp; performance.</p>
        <p>Relaxation massage is a perfect way to banish the stress &amp; 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 &amp; body.</p>
        <p>I treat everybody with a high degree of care &amp; attention. I always consider your work, your life situation &amp; your sport when           <br>treating you. My approach is holistic, my treatments are unique &amp; designed specificaly for you.</p>
        <p>You will feel sensational &amp; experience an unbroken night's sleep after just one of my treatments</p>
        <p>Sports &amp; relaxation massage can:</p>
        <ul>
            <li>Reduce stress &amp; anxiety</li>
        </ul>

        </div><!-- end va-content -->
        </div><!-- end va-slice -->

va-slice has a height of 50px defined in style.css so it restricting what can be seen so even when the content is expanded you are not seeing it.

Your javascript should be

$('#va-accordion .va-heading').click(function(){
               $('#va-accordion .va-content').slideUp();
               $(this).next().slideDown();
               return false;
       });
7

thanks for your help, greatly appreciated