jquery accordion and dialog css conflict
Hi,
I am working on a site that is using a dialog to do a little pop up box to show some text. That link is on every page and works great. On one of my pages, I'm using an accordion for some navigation. The css for the accordion and the dialog widgets are conflicting with one another.
Right now you can see how it works - the accordion works fine but the dialog box is not styled correctly: http://newtestsite.jalexanders.com/locations.php
If I add the jquery css to make the dialog box work then the accordion style breaks - no matter where I put the call to the jquery stylesheet.
I've tried going to the jquery stylesheet and moving the styles for each into my local copy and working with them that way but there are so many! I thought I'd post here to see if I'm perhaps making a rookie mistake that could be easily fixed.
Here is the code (working in noconflict mode), I'd appreciate any tips you can give me!
// general disclaimer pop up
var dialog = jQuery("<div style='font-size:10pt;'></div>")
.html(" -- legal disclaimer code goes here --")
.dialog({
autoOpen: false,
title: "General Disclaimer",
width:640,
buttons: {
"close window": function() {
jQuery(this).dialog('close');}
}
});
jQuery('#disclaimer').click(function(event) {
event.preventDefault();
dialog.dialog('open');
});
// accordion (nav on left) functions
jQuery("#accordion").accordion({ collapsible: true, active: false, autoHeight: false, navigation: true });
jQuery('.locationsListCities').bind(
'click',
function() {
// first turn off any selected cities
jQuery( ".locationsListCities" ).each(
function( ){
jQuery( this ).removeClass('locationsListCitiesActive');
}
);
// then turn on just the one that was clicked on
jQuery(this).addClass('locationsListCitiesActive');
return false;
}
);