gbAccordion v1.0

Mit gbAccordion können sie einen Auf- Zuklapp-Effekt (Accordion-Effekt) realisieren. Durch klicken eines Elementes wird der dazugehörige Inhalt aufgeklappt und der alte Inhalt zugeklappt. gbAccordion eignet sich hervorragend für einen FAQ-Bereich.

Demo

Klicken Sie auf die einzelnen Überschriften.

Sie können auch das erste Aufklapp-Element beeinflussen.
z.B. de/webprojekte/technologie.html#mootools

» gbAccordion Demo herunterladen

Einbinden

1. Laden Sie die benötigt Daten » hier herunter.
2. Binden Sie die JavaScript Dateien in Ihrer Seite ein.
   
   <script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
   <script type="text/javascript" src="js/gbaccordion_compile.js"></script>
3. Legen Sie einen Hauptcontainer an, indem der Effekt ausgeführt werden soll.
   Vergeben Sie diesem Container auch eine ID!
   
   <p id="accordion"></p>
4. In diesem Hauptcontainer kommen nun Ihre Elemente für die Überschriften und den Inhalten. Vergeben Sie den Überschriften einen Klassennamen und eine ID. Die ID wird für den Anker benötigt. Den Inhalten reicht der Klassenname.
   
   <p id="accordion">
   <h2 id="ankername" class="toggler">// Eine Überschrift</h2>
   <div class="listcontent">Hier steht der Inhalt</div>
   </p>
5. Sie können der Klasse noch Optionen (optional) zuweisen, die der Klasse übergeben werden soll.
   
   <script type="text/javascript">
   var gbAccordionOpt = {
   handle : 'accordion',
   toggler : 'toggler',
   toggleractive : 'togglerh',
   content : 'listcontent',
   anker : 0,
   opacity : false
   }
   </script>
6. Die JavaScript Klasse wird automatisch aufgerufen, wenn die Webseite vollständig geladen ist.
7. Das Aussehen der Elemente können Sie per CSS einstellen.
   
   <style type="text/css">
   #accordion {
   margin-bottom: 1em;
   }
   .toggler {
   color: #000;
   }
   .togglerh {
   color: #ff4e00;
   }
   .toggler, .togglerh {
   cursor: pointer;
   }
   </style>

Erläuterung

• handle
  Geben Sie hier die ID des Hauptcontainers an.
  Z.B. 'accordion'
• toggler
  Hier steht ihr Klassenname für die Überschriften.
  Z.B. 'toggler'
• toggleractive
  Hier steht der Klassenname für den aktiven und mouseover Zustand einer Überschrift.
  Z.B. 'togglerh'
• content
  Hier steht der Klassenname für Ihre Inhalte.
  Z.B. 'listcontent'
• anker
  Tragen Sie hier eine Nummer für das Element ein, das als Erstes angezeigt werden soll. Beachten Sie, dass Sie hier die Position in einen Array vergeben. D.H die Position 1 ist die 0.
  Z.B. 0
  Sollten Sie einen Verweis mit einen Anker übergeben (index.html#javascript), dann wird die Position automatisch ermittelt.
  
• opacity
  Beim Auf- oder Zuklappen kann der Inhalt Ein- oder Ausgeblendet werden. Tragen Sie hier true (Blend-Effekt an) oder false (Blend-Effekt aus) ein.
  Z.B. false

Kommentare schreiben

Name*

Kommentar*

Code bestätigen*

 

2 Kommentare

Kiki

06.12.2011 15:12:07

mhhh funktioniert nicht zum auf und zu klappen.... hab IE...

danke

gb media

06.12.2011 22:43:11

hallo kiki,

danke für den hinweis.
das problem lag an der main.js, die in dieser seite eingebunden wurde.
ist gefixt und schon läuft alles wie gewollt.
bitte cache leeren.

viele grüße

Google-Analytics

gbBgImage

Inhaltsmanager

Mit dieser Anwendung können Sie oder Ihre Mitarbeiter die Inhalte Ihrer Webseiten von jedem internetfähigen Rechner aus bequem verwalten und bei Bedarf ändern – einfach, schnell und ohne zusätzliche Software oder Programmierkenntnisse.
» Weiter

LERROS

Moden, Neuss
» Weiter