Harmonika (accordion)

Adott méretű felületen több tartalom megjelenítése. Akkor célszerű használni, amikor nincs túl nagy hely, de mégis szükséges sok szöveget elhelyezni. Hasonlít a sima fül-es megoldáshoz.

A szükséges állományok: ui.accordion.js, accordion.css.

Használata

Készítsünk listát az ul és li tagek használatával. Minden li tagen belül helyezzünk el egy a és egy div taget. Az a tag lesz a címrész, a div pedig a tartalom rész. Minden a tag href mezőjébe írjuk egy kettős keresztet (<a href="#"></a>), illetve a szöveges részhez az adott fül címét. A div részbe jön a tartalom.

Forráskód

HTML

A head-ben hívjuk meg a szükséges fájlokat!

<script type="text/javascript" src="js/ui.accordion.js"></script>
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen" />

A body-ban a következő kódrész szükséges.

<ul id="example" class="example">
  <li>
    <a href="#">Első fül</a>
    <div>Első fül tartalma</div>
  </li>
  <li>
    <a href="#">Második fül</a>
    <div>Második fül tartalma</div>
  </li>
  <li>
    <a href="#">Harmadik fül</a>
    <div>Harmadik fül tartalma</div>
  </li>
</ul>

CSS

A css-ben a feltétlenül szükéges tulajdonságokat meg kell adnunk, melyek a li tag esetében a display: block és a position: relative. Ezek az accordion.css állományban találhatók.

.example {
	list-style-type: none;
}
.example li .example-header {
	display: block;
	position: relative;
}

Példa

• Első fül
  Ez az első fül tartalma. Ha a második fülre kattintunk, akkor megjelenik a második fül tartalma. Ha pedig a harmadik fülre, akkor a harmadik fül tartalma.
• Második fül
  Most az Első fül címe felcsúszott, miközben láthatóvá vált a második fül tartalma. Most kattinthatunk az első vagy a második fülre, akkor azok tartalma fog megjelenni.
• Harmadik fül
  Ez pedig a harmadik fül tartalma.

Forrás: jQuery.com/Accordion