Programming Solution

JQuery accordion is a very UI control. This can be often used as navigation control that has an automatic animation. Looks nice. But sometimes we may encounter a problem. Jquery accordion takes the maximum height from all the items and set this maximum height to all the items. Sometimes this is not what we want. I was trying to create category post navigation where I had posts under each category. In my case, I had many articles in some categories and in some other, I had a few. As every item was taking the maximum height, it was not looking good. So I would like to have an adjusted height for every item according to the item content size. The solution is simple. We can set the height of the item’s content to auto. Then it will take the content size into consideration and adjust the height as necessary. But Jquery accordion is a plug-in. How to get the adjusted height in JQuery accordion?

$(document).ready(function() {

$(“#category_post_accordion”).accordion({

changestart: function(event, ui) {

ui.newContent.css(‘height’, ‘auto’);

}

});

$(“#category_post_accordion”).children().eq(1).css(‘height’, ‘auto’);

});

I was initiating the accordion on document ready, which is very trivial. I just added a changestart event handler. Changestart event is triggered every time the accordion starts to change. If we catch the UI item in the event handler, ui.newContent gives us the new item’s content object. I changed the height of the ui.newContent. Now it works as desired with one exception.

The first item of the accordion is opened by default and there is no changestart event fired when the first item is opened. So I was taking the maximum height. So I took the second child under the accordion object and set its height to auto. Why second child? The first child is the header of the first item of course.

Pretty simple but works fine now.