Use h4 as header : UI Accordion « jQuery « JavaScript DHTML






  1. JavaScript DHTML
  2. jQuery
  3. UI Accordion

Use h4 as header

 


<html>
  <head>
    <script type='text/javascript' src='js/jquery-1.3.2.js'></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.accordion.js"></script>
    <script type='text/javascript'>
$(document).ready(
  function() {
    $('ul').accordion({
      fillSpace: true,
      event: 'mouseover',
      active: 'h4.tmpSelected',
      header: 'h4'
    });
  }
);
    </script>
    <style type='text/css'>
ul {
    list-style: none;
    margin: 0;
    padding: 15px 5px;
}
ul h4,
ul p {
    margin: 5px;    
}
li {
    background: gray;
    padding: 3px;
    width: 244px;
    margin: 1px;
}
    </style>
  </head>
  <body>
    <ul>
      <li>
        <h4>A</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          Vestibulum luctus rutrum orci.
        </p>
      </li>
      <li>
        <h4>B</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          Vestibulum luctus rutrum orci. Praesent faucibus tellus 
          faucibus quam. Aliquam erat volutpat. Nam posuere. Aliquam 
          erat volutpat. Etiam at lacus fermentum dui interdum pretium. 
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
      </li>
      <li>
        <h4 class='tmpSelected'>C</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          Vestibulum luctus rutrum orci. Praesent faucibus tellus 
          faucibus quam. Aliquam erat volutpat. Nam posuere.
        </p>
      </li>
      <li>
        <h4>D</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
          Vestibulum luctus rutrum orci. Praesent faucibus tellus 
          faucibus quam. Aliquam erat volutpat. Nam posuere.
        </p>
      </li>
    </ul>
  </body>
</html>








Related examples in the same category

1.Setting autoHeight: false allows to accordion panels to keep their native height.
2.jQuery UI Accordion - Collapse content
3.Customize the header icons
4.jQuery UI Accordion - Default functionality
5.jQuery UI Accordion - Fill space
6.Accordion Resizer
7.jQuery UI Accordion - Open on mouseover
8.This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size
9.Call accordion() function to make an accordion panel
10.Create option array and pass to create accordion panel
11.alwaysOpen:false, autoHeight:false
12.Set active panel for accordion
13.fillSpace: true
14.Destroy the accordion panel
15.Enable or disable accordion panel
16.Set active accordion panel
17.accordion panel open/close event
18.Use mouse over event to trigger
19.Set active panel by class name