I have implemented two accordions on my webpage, each with customized CSS in a separate file to prevent any conflicts. However, the accordions are not displaying correctly and instead show all content at once as if the accordion styling is missing. Both accordions are placed around the middle of the page, and I have also tried loading them using $(document).ready without success. What elements should I examine in the CSS files?
There are no instances of inline-block being utilized.
I am utilizing jQuery 1.3.2.min and jQuery UI 1.7.2, so it seems that setting autoHeight to false will not resolve the issue... This setup is within a Symfony-based website.
The functionality works perfectly on Firefox, IE8, and Chrome. However, there are compatibility issues when viewed on IE6 and IE7/IE8 compatibility mode.
$(function() {
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true,
icons: { 'header': 'ui-icon-carat-1-e', 'headerSelected': 'ui-icon-carat-1-s', }
});
$(".links").accordion({
active: false,
autoHeight: false,
collapsible: true,
});
});