jQuery UI Accordion CSS

Question

I am planning to use the jQuery UI Accordion and also the default theme provided

I see that the jQuery UI Accordion uses the following classes from this url link text

<div class="ui-accordion ui-widget ui-helper-reset">
  <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
    <span class="ui-icon ui-icon-triangle-1-s"/>
    <a href="#">Section 1</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
    Section 1 content
  </div>
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 2</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 2 content
  </div>
  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-triangle-1-e"/>
    <a href="#">Section 3</a>
  </h3>
  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
    Section 3 content
  </div>
</div>

I do not want to use the entire CSS from the theme file, just the ones required for the UI Accordion. However I am not able to create the same effect. Anyone can help?

Answer 1

DEMO: http://so.lucafilosofi.com/jquery-ui-accordion-css/

updated to latest jQuery version 10

you don't need to have all that code! you have copied the jquery example that explane how jquery create the full accordion widget!

you just need to have like this:

HTML

<div id="accordion">  
  <h3><a href="#">caption 1</a></h3>  
  <div>some text here    
  </div><h3><a href="#">caption 2</a></h3>  
  <div>some text here    
  </div><h3><a href="#">caption 3</a></h3>  
  <div>some text here    
  </div><h3><a href="#">caption 4</a></h3>  
  <div>some text here    
  </div>
</div>

jQuery / JS

$(function() {
  $("#accordion").accordion();
});

CSS

.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;
}
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a {
  zoom: 1;
}
.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;
}

NOTE: this minimum css require also the .ui-widget CSS see the demo!

Answer 2

In the jQuery UI Download page you can select the parts of the javascript and css you need. If you deselect all and then select the Accordion widget you will get only the JavaScript and CSS for the accordion in your download.