Kwicks for jQuery different sizes

Question

I'm doing a vertical dropdown with Kwicks for jQuery: http://www.jeremymartin.name/projects.php?project=kwicks

Take A look at the markup:

<ul class="kwicks">
    <li id="kwick1">
        <div class="title">Title 1</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
    <li id="kwick2">
        <div class="title">Title 2</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
        <div class="item"><b>Item 5</b> Description 5</div>
        <div class="item"><b>Item 6</b> Description 6</div>
    </li>
    <li id="kwick3">
        <div class="title">Title 3</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
    </li>
    <li id="kwick4">
        <div class="title">Title 4</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
</ul>

Javascript:

$().ready(function() {
    $('.kwicks').kwicks({
        min : 15,
        spacing : 9,
        isVertical : true,
        sticky : true,  
        event : 'click' 
    });
});

See it live here: http://jsfiddle.net/6xL5M/3/

As you can see, they have different content size, and for default, Kwicks for jQuery show all with the same Size, isnt there a way to make each one have his own height?

Thanks a lot in Advance.

Answer 1

Here is how I Solved this: http://jsfiddle.net/6xL5M/5/

I didn't use the Kwicks Plugin for that, just Simple jQuery, that basically is:

$(".kwicks #kwick1").click(function() { 
    $(this).animate({height: 4 * itemsize + titlesize +'px'}, 600, 'easeOutQuint');
    $(this).siblings().animate({height: titlesize +'px'}, 750, 'easeOutQuint');
});

Where 4 referrers to how many Items it have, itemsize is the Height of each item and titlesize is the height of the Title. It also reset the siblings to the Height of the Title.

Maybe it can Help Someone.

Thanks for your Support!

Answer 2

I just spent time looking through Kwicks and working with code on my own sandbox in order to figure out how to make a list with different heights for each li (when not in active state).

The answer unfortunately is that the kwicks library does not support that. I figured this out two different way. First I looked at the API --- there is no configuration for this setting. Second, I tried to get the result using CSS on top of Kwicks, however the Kwicks library does not regard any of my CSS in its calculations so elements end up sitting on top of other elements (wrong).

If you want that type of functionality you will either have to extend the Kwicks library or just write your own code that can do this.

Answer 3

@richardaday's answer is correct (I'm the author of Kwicks, so... just trust me :p).

FYI, I've moved Kwicks to a new home today: http://devsmash.com/projects/kwicks. The docs for the old version that you're most likely using are at http://devsmash.com/projects/kwicks/1.5.1. I highly recommend updating to the latest version though - there are known bugs in 1.5.x, and the overall experience with 2.x should be much better.

Please note that while variable-sized panels aren't yet supported, this doesn't seem like an unreasonable feature to add. Feel free to open a feature request and I can start looking into the feasibility of it: https://github.com/jmar777/kwicks/issues