so I have a jQuery accordion menu that I want to implement to my wordpress homepage, the problem is everytime I put the menu there, it extends my page way down like 1200 px height, and it`s the only one that does this.

How can I stop it from declaring that height and let me make it exactly how long the menu is extending, or even better go once with it. Again, I am talking about a wordpress plugin.

The theme I want to implement the menu in is :

Left column

so I have a jQuery accordion menu that I want to implement to my wordpress homepage, the problem is everytime I put the menu there, it extends my page way down like 1200 px height, and it`s the only one that does this.

How can I stop it from declaring that height and let me make it exactly how long the menu is extending, or even better go once with it. Again, I am talking about a wordpress plugin.

The theme I want to implement the menu in is : http://themeforest/item/celta-business-modern-corporate-wordpress-theme/full_screen_preview/218824?ref=lvraa

Left column

• php
• javascript
• wordpress
• jquery-plugins

• 4 So you have a jQuery accordion menu, but you won't show it to us. How can anyone answer? Also, why would anyone upvote a question which cannot be answered? – oxygen Commented Jun 26, 2012 at 23:30
• Can you provide us with a link to the problem website or some example code? – Mark Commented Jun 27, 2012 at 11:28
• Are you using the jQuery UI Accordion widget or another plugin? – Jeffery To Commented Jun 28, 2012 at 9:48

6 Answers 6

First you should try to set autoHeight to false , this will fix the height problem.

Then I could find the problem regarding HTML lists, I grabbed your HTML, put it locally and used the demo source for jQuery UI accordion (the section 3 have some HTML list inside) and it seems to work fine.

Hope it will Help :)

We all need your code to see the actual problem. You can jsfiddle it. Also, try making the autoHeight to false.

$(".yourselector" ).accordion({ autoHeight: false });

When you initialize the accordion, include autoHeight: false in the options. It will then use the native heights specified in each div.

It is impossible to give you a sure answer without knowing which accordion plugin you are using. It would have been very helpful for you to give a URL that showcases your issue.

If you are using the jQuery UI Accordion, you can try:

1. initializing the accordion with autoHeight set to false.
2. explicitly set a height for the container of your accordion. for example:

   < style>
   #accordion {
   height:200px !important;
   }
   < /style>
   < div id="accordion">...< /div>

3. initialize the accordion with fillSpace set to true and then explicitly set the height of the accordion's parent element.

You need to change autoHeight to false. Doing so may reduce the quality of animation, but should fix the height issue.

It is caused by the accordion taking the height of the largest div. Lots more about it here: http://docs.jquery./UI/Accordion#option-autoHeight

$( ".selector" ).accordion({ autoHeight: false });

To overe this issue, You must set two properties as below :-

$( ".selector" ).accordion({ autoHeight: false });

and

$( ".selector" ).accordion({ clearStyle: true });

Refer the - official jQuery accordion documentation