jQuery Classic-Accordion wird nicht angezeigt!

machomaaan

Hallo Community.

Ich möchte auf meiner Seite zwischen Header und Content ein jQuery Accordion einfügen.

Wenn ich alle wichtigen Dateien in die header.php einbinde, wird mir das Accordion aber nicht angezeigt.

Woran liegt das?

Die CSS für das Accordion lautet:

HTML

.accordion
{
    position:relative;
    overflow:hidden;
    margin:0; padding:0; border:0;
}




.accordion .panel
{
    background-image:url(accordion-assets/images/preloader.gif);
    background-repeat:no-repeat;
    background-position:center center;
    position:absolute;
    overflow:hidden;
    background-color:#FFF;
    background-repeat:no-repeat;
}




.accordion .shadow-horizontal
{
    background:url(accordion-assets/images/shadow.png) repeat-Y;
    position:absolute;
    right:0px;
    width:25px;
    height:100%;
}




.accordion .shadow-vertical
{
    background:url(accordion-assets/images/shadow_v.png) repeat-x;
    position:absolute;
    bottom:0px;
    width:100%;
    height:25px;
}




.accordion .preloader
{
    background:url(accordion-assets/images/preloader2.gif) no-repeat;
    width:62px;
    height:14px;
    position:absolute;
    z-index:15;
}




.accordion .caption
{
    overflow:hidden;
    position:absolute;
    z-index:20;
}




.accordion .caption-background
{
    background:transparent url(accordion-assets/images/captionBg.png);
    background:rgba(0,0,0,0.5);
    position:absolute;
    width:100%;
    height:100%;
}




.accordion .caption p
{
    color:#FFF;
    margin:0px;
    padding:10px;
}




.accordion .caption p a
{
    color:#FFF;
}

Alles anzeigen

und eingebunden wird das Accordion via

HTML

<ul class="accordion">
            <li>
            <a href="artikelueber.php?wgruppeid=3" target="_self" title="KTM eBikes und Spezialräder"><img src="templates/shop_rot/images/accordionbild/ebikes.jpg"/></a>
            </li>
            <li>
            <a href="artikelueber.php?wgruppeid=54" target="_self" title="Ersatzteile"><img src="templates/shop_rot/images/accordionbild/ersatzteile.jpg"/></a>
            </li>
            <li>
            <a href="artikelueber.php?wgruppeid=45" target="_self" title="Bike Zubehör"><img src="templates/shop_rot/images/accordionbild/zubehör.jpg"/></a>
            </li>
            <li>
            <a href="artikelueber.php?wgruppeid=33" target="_self" title="Bekleidung und Accessoires"><img src="templates/shop_rot/images/accordionbild/bekleidung.jpg"/></a>
            </li>
            <li>
            <a href="vorlage.php?vorlage=service" target="_self" title="Service- und Reparaturwerkstatt"><img src="templates/shop_rot/images/accordionbild/service.jpg"/></a>
            </li>
            <li>
            <a href="vorlage.php?vorlage=verleih" target="_self" title="eBikes Verleih"><img src="templates/shop_rot/images/accordionbild/verleih.jpg"/></a>
            </li>
        </ul>

Alles anzeigen

Hat jemand eine Idee?
Muss ich die .js-Datei vielleicht wo anders einbinden statt in der header.php?

Aber selbst wenn ich die .css und die .js -Dateien nicht einbinde, wird mir das Accordion schon nicht angezeit.
Sobald ich den Quellcode für das Accordion entferne und stattdessen irgend einen Text schreibe, erscheint der genau dort, wo das Accordion stehen soll?!

Bitte um Hilfe!

Vielen Dank!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

Zitat

Aber selbst wenn ich die .css und die .js -Dateien nicht einbinde, wird mir das Accordion schon nicht angezeit.

.css ist für die Formatierung
.js für die Funktion

wenn also gar nichts angezeigt wird, ist auch nichts da :wink:

da dein Accordion aus Bildern besteht, stimmt wohl der Pfad zu diesen nicht oder ist unvollständig

Code

<img src="[COLOR="#FF0000"]hier fehlt sicher was[/COLOR]....templates/shop_rot/images/accordionbild/verleih.jpg"/>

was da fehlt ist vom Theme oder Plugin abhängig

da es keinen Link gibt, musst selber suchen ;)

machomaaan

Hallo AoP,

es sind oft nur Kleinigkeiten, an denen es scheitert ;) Der Pfad war noch von der alten Website :D

Ich habe aber nochmal ein Problem.
Das Accordion ist jetzt links ausgerichtet. Wie bekomme ich das in die Mitte der Seite?
Hab versucht mit einem DIV aussen rum und "align:center;", funkt aber nicht?! Hast noch einen Tipp? Vermutlich ist mein Kopf schon in Feierabendstimmung ;)

LG,
Mario

Domino5702

DIV aussen herum ist richtig, aber CSS muss lauten margin: 0 auto;

machomaaan

Zitat von Domino5702

CSS muss lauten margin: 0 auto;

Hallo Domino, danke für die Info, funktioniert aber leider nicht.

machomaaan

http://www.abc-ebikes.at/web/ hier ist die Test-Seite.

Hat jemand eine Ahnung?

Tutrix

füge mal dies

Code

ul.accordion.classic-accordion {
    margin: 0 auto;
    position: relative;
}

in die style.css

machomaaan

Zitat von Art of Pic
füge mal dies
Code
ul.accordion.classic-accordion {
    margin: 0 auto;
    position: relative;
}
in die style.css

Genial! Jetzt funktioniert's perfekt!

Vielen Dank "Art of Pic" und "Domino5702".

GalieGrü,
Mario

Willkommen! Melden Sie sich an oder registrieren Sie sich.

jQuery Classic-Accordion wird nicht angezeigt!

Jetzt mitmachen!