Vorlage: Einfache Accordion Box

Hallo zusammen,

leider funktioniert das Bootstrap Standard-Accordion (noch) nicht mit den Bordmitteln des Honeygrid (zumindest meiner Meinung/Erfahrung nach ;-)). Habe mir deshalb gerade mal etwas "gebastelt", vielleicht kann es ja jemand mal gebrauchen!

So sieht es aus:


Hierfür notwendig:

HTML:

<!-- Html Accordion Box -->
<div class="abtitel">
<h4>&Uuml;berschrift</h4>
</div>
<div class="abinhalt">
<p>Lorem ipsum Lorem ipsum Lorem ipsum .</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum .</p>
</div>
<!-- /Html Accordion Box -->

/templates/Honeygrid/usermod/css/meinstyle.css

Code:

/* WWA ACCORDION BOX Gambio Honeygrid */
.abtitel {
padding-left:15px;
height:28px;
background: url(/images/.../accordion-open.png) 0 3px no-repeat !important;
cursor: pointer;
color:#104675;
}
.aboffen {
background: url(/images/.../accordion-close.png) 0 3px no-repeat !important;
}
.abinhalt {
display:none;
background-color:#fff;
border: #CCCCCC 1px solid;
padding: 10px;
margin-bottom:10px;
}
/* /WWA ACCORDION BOX Gambio Honeygrid */

/templates/Honeygrid/usermod/javascript/Global/meinscript.js

Code:

// WWA ACCORDION BOX Gambio Honeygrid
$(document).ready(function() {
$('.abtitel').click(function() {
$('.abtitel').removeClass('aboffen');
$('.abinhalt').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('aboffen');
$(this).next().slideDown('normal');
}
});
});

Und dann noch die zwei Bilder:



Das war es auch schon. Nicht besonderes, aber vielleicht kann es ja doch mal jemand gebrauchen.

Verbesserungsvorschläge/Erweiterungen/Tipps sind natürlich gerne gesehen ;-)!

Schönes Wochenende!

 

Hallo Joschu,
mir wurde schon 2-3 im Forum geholfen... denke mal, ist alles ein geben und nehmen ;-).
Bis dahin!

 

Hallo Steffen,
vielen Dank für den Tipp!
Ehrlich gesagt, bringt mich - absoluten Gambio-Neuling - das nicht so wirklich weiter.
Gibt es ggf. eine Vorlage/Beispiel für ein Accordion mit den Gambio-Bordmitteln...?
Viele Grüße