Zitat: <script type="text/javascript" src="http://flashstyler.xe.cx/tools/SpryAccordion.js"></script>
<link rel="stylesheet" type="text/css" href="http://flashstyler.xe.cx/tools/SpryAccordion.css" />
<style type="text/css">
<!--
.AccordionPanelOpen .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionPanelTabHover {
color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
color: #555555;
}
.AccordionFocused .AccordionPanelTab {
background-color: #EEEEEE;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #09C;
}
-->
</style>
<div id="Accordion1" class="Accordion" tabindex="0">
<!--Anfang eines "Klaptextes"-->
<div class="AccordionPanel">
<div class="AccordionPanelTab">Titel über dies...</div>
<div class="AccordionPanelContent">Inhalt 1</div>
</div>
<!--Ende eines "Klaptextes"-->
<div class="AccordionPanel">
<div class="AccordionPanelTab">Titel über das...</div>
<div class="AccordionPanelContent">Inhalt 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Tite über jemanden...</div>
<div class="AccordionPanelContent">Inhalt 3</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
Da im Stylesheet bereich (<style type="text/css"> ...</style>) kannst du die Faben der Balken einstellen. Da musst einfach mal etwas Experimentieren was zu was gehört und wie es am besten aussieht.
Und noch was zu den kleinen Icons, die habe ich erstellt, und die liegen bei mir aufem Server, also kannst du sie mit guten gewissen benutzen ^^...
gruß Shäf
______________