jquery UI library interfering with existing classes

Ive just had added the jquery ui librar开发者_开发百科y to a web page.

It appears that without even calling any its functions, it manipulates an unrelated div element which coincidentally has the css class name 'accordion'

This is really bad design imo, is this functionality by design?

If you are not using the $(selector).accordion() function it won't manipulate your DOM.
BUT because you have a class="accordion" applied on an element, and I assume that you have loaded the jquery.ui.css with the js too, the default 'accordion' styles will get applied on your elements.

I agree with rucsi, the odd thing is that the classes on the JQuery UI css file use the class name ui-accordion. Anyway, try removing the following lines from your jquery-ui.css file (it's named jquery-ui-1.8.11.custom.css by default):

/*
 * jQuery UI Accordion 1.8.8
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }/*