SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2004
    Posts
    419
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accordion Height Issue

    Hi,

    I'm working on a free HTML5 template, and all is going well, apart from the fact that I can't work out why each of the accordion sections is a set height (apart from the 1st one which is automatically selected - if you click on the sections below that, they are all a set height).

    This is the page:
    http://jimpix.co.uk/c/xds/Shinra/edm...l-details.html

    I've inspected the element with Firebug, and it shows the height is 326px, but when I look through the CSS, there is no mention of that value, or anything setting the height of the accordion.

    I'd like to just have the accordion sections to take the height of the content inside them, but can't see how to do it.

    Any advice much appreciated.

    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,528
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Accordions generally work by the JS scanning through all the elements and setting the height of all elements to the height of the tallest content in that block. This is what is happening in your accordion and if you look at the html in Firebug you can see that an inline style has been written with a height of 326px.

    The reason for this is that if you don't do that then the accordion will jump up and down each time a menu opens (and so will the page height) and will look unsightly and be hard to use.

    You can over-ride the issue with css as follows.

    Code:
    .ui-accordion-content{height:auto!important}
    However you wil now see that the accordion is jumpy and unusable. Also jquery likes to animated fixed height elements and sliding auto height elements is often very jerky.

    Therefore if you use accordions its best to use them with content of similar sizes and let the js fix the height to the tallest.


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
  •