SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to adjust the height of jquery accordian

    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

    Code JavaScript:
    $(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
    Code JavaScript:
    $( ".selector" ).accordion({ autoHeight: false });

    HTML
    Code HTML4Strict:
    <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
    Code 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. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code JavaScript:
    $("#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. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, I'll start over
    Code JavaScript:
    $(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
    Code JavaScript:
    .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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by funkybuddha View Post
    what I am not sure about is the
    Code JavaScript:
    .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().
    When an element contains multiple class names, any one selector will match that element.

    So the click event can be assigned with just:

    Code javascript:
    $('.va-slice').click(function(){
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    When an element contains multiple class names, any one selector will match that element.

    So the click event can be assigned with just:

    Code javascript:
    $('.va-slice').click(function(){
    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
    Code JavaScript:
    $(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. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Couple of things which are not help the situation

    Your html is

    Code Java:
    <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

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

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help, greatly appreciated


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •