im using this accordion http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/

 

its working fine and it seems like it will serve me well.

 

but im stuck on how to create a variable panel height, i have put a lists within the panels, the problem lies in that each panel has a different amount of items within it. the panel default panel height is the height of the tallest panel

 

so a panel of 3 items will have room for 5, if the there is also a 5 list panel within the accordion

 

could solved with a change in code/css or something else?

Edited April 12, 201214 yr by sergRamalli

if u need 3 panels jusr need to dlete some html

 

so code will be

<ul id="accordion">  
   <li>  
       <a href="#recent" class="heading">Recent Entries</a>  
       <ul id="recent">  
           <li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li>  
           <li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>  
           <li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>  
           <li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>  
           <li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>  
       </ul>  
   </li>  
   <li>  
       <a href="#popular" class="heading">Popular Entries</a>  
       <ul id="popular">  
           <li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li>  
           <li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li>  
           <li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li>  
           <li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li>  
           <li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li>  
       </ul>  
   </li>  
   <li>  
       <a href="#categories" class="heading">Categories</a>  
       <ul id="categories">  
           <li><a href="#">Category Name</a> <span class="count">7</span></li>  
           <li><a href="#">Category Name</a> <span class="count">4</span></li>  
           <li><a href="#">Category Name</a> <span class="count">15</span></li>  
           <li><a href="#">Category Name</a> <span class="count">29</span></li>  
           <li><a href="#">Category Name</a> <span class="count">8</span></li>  
       </ul>  
   </li>  

</ul>  

 

thats 3 panel

Edited April 13, 201214 yr by sash_oo7

sorry there has be a misunderstanding it isnt an issue with the html. its an issue with the JavaScript/jquery (if im not mistaken)

 

i have 8 panels and they range from 3 <il> within a <ul> to 6<il> within a <ul>

 

the problem is that the default height of all the panels these elements are contained within, becomes that of the tallest panel.

so 6 <il> would for example be 300 px....the ul with 3<il> in the accordion would only need 150px but has extra space of around 150px

so all panels make room for 6 <il> within the <ul> even if they only have 3, 4 , or 5 <il>

 

i want to panel height to change as necessary

Edited April 13, 201214 yr by sergRamalli

i have found another one, that is an example of what im talking about

 

http://www.p51labs.com/accordion/

 

 

p.s i know i could use that one, but i want to know how to, if possible i could change the code to make it occur in both. for learning purposes

I do not have the time right to fully look into what is causing the accordion to automatically expand to the height of the largest UL, but there is a simple temporary fix.

 

You can take the ID of each UL and create a style with a specified height to display the content with no white space below the last entry. Again this is only a temporary fix and isn't ideal but it will work for the time being.

 

For Example:

#recent {

height: 250px;

}

 

#popular {

height: 100px;

}

 

& etc.

 

 

Ooops I just realized this was posted back in April. I'll submit the post just incase you haven't figured this out. If you need help, feel free to PM me and I'll figure out what exactly is going on for you after I leave the office.