ich denke ja ... aber da bin ich nicht fündig geworden ...

Was hältst Du denn davon?

Manchmal sieht man den Wald vor lauter Bäumen nicht ... Danke

... aber leider nichts brauchbares dabei 🙁

Grüßt euch und Danke, für Eure immer hilfreichen Beiträge. 😃

Ich habe jetzt ein paar schöne Akkordeon-Widgets gefunden, einige davon sind noch eine wirklich harte Nuss für mich, da ich keinen Schimmer von HTML oder CSS habe, andere wiederum sind einfacher zu durchschauen.

So habe ich zum Beispiel herausgefunden, wie ich bei folgendem Akkordeon-Widget, Farben, Größen, Schriften, Textfelder und so weiter verändere, ... das Problem an dem ich jetzt aber schon eine Weile knacke ist: Das Ding will nicht an seinem Platz bleiben ... Hiiiiilfeeee:

Wer von Euch knackt die Nuss ? ... ich brauche dringend einen hellen Kopf, der mir sagen kann, was ich falsch mache.

Meine bisherige Vorgehensweise:

Diesen HTML-Code in Magix WebDesigner 16 >>> Platzhalter >>> "HTML-Code (body)" eingefügt:

<article class="accordion">

    <section id="acc1">
        <h2><a href="#acc1">Wie geht das ?</a></h2>
        <p>This content appears on page 1.</p>
    </section>
    
    <section id="acc2">
        <h2><a href="#acc2">Ist das schwierig ?</a></h2>
        <p>This content appears on page 2.</p>
    </section>
    
    <section id="acc3">
        <h2><a href="#acc3">Kann das jeder ?</a></h2>
        <p>This content appears on page 3.</p>
    </section>
    
    <section id="acc4">
        <h2><a href="#acc4">Weshalb verrutscht das ?</a></h2>
        <p>This content appears on page 4.</p>
    </section>
    
    <section id="acc5">
        <h2><a href="#acc5">Hat jemand eine Idee ?</a></h2>
        <p>This content appears on page 5.</p>
    </section>

</article>

Dann diesen CSS-Code in Magix WebDesigner 16 >>> Platzhalter >>> "HTML-Code (head)" eingefügt:

<style>

article.accordion
{
    display: block;
    width: 50em;
    padding: 0.5em 0.5em 1px 0.5em;
    margin: 0 auto;
    background-color: #29acac;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion section
{
    display: block;
    width: 48em;
    height: 3em;
    padding: 0 1em;
    margin: 0 0 0.5em 0;
    color: #333;
    background-color: #d9e6c3;
    overflow: hidden;
    border-radius: 3px;
}

article.accordion section h2
{
    font-size: 1,5em;
    font-weight: bold;
    width: 100%;
    line-height: 3em;
    padding: 0;
    margin: 0;
    color: #4c4c4c;
}

article.accordion section h2 a
{
    display: block;
    width: 100%;
    line-height: 2em;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}

article.accordion section:target
{
    height: 15em;
    background-color: #fff;
}

article.accordion section:target h2
{
    font-size: 1.6em;
    color: #333;
}

article.accordion section,
article.accordion section h2
{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

</style>

So weit alles gut. Und jetzt hüpft das Ding ...

wenn Ihr es ausprobiert, dann wisst ihr was ich meine!

Besten Gruß und Danke für Eure Hilfe

Svend

Mhm.
Nein, ich habe den Code nicht ausprobiert.

Da fehlt sicher noch was.
Du bindest u.a. ein: href="#acc1"

Wie soll der Link ans Ziel führen? Da war doch sicher noch eine Skriptdatei im Angebot, oder?

Gruß Marboe

Grüß Dich Marboe,

... wie gesagt, ich habe keine Ahnung ... Ziel ? ... ich weiß doch gar nicht was href="#acc1" bedeutet ...

Das Widget funktioniert ja so weit, auch kann ich alle möglichen "Parameter" verändern ... die Seite bleibt halt nur nicht an ihrem Platz, wenn mann das Akkordeon betätigt ... hmmm

... es bleibt spannend ;-)

Gruß Svend

... noch was, ... ich habe dieses href="#acc1" da nicht eingebunden, das war so. Und es fehlt nichts, ich habe alles was da war kopiert. Das einzige, was ich verändert habe sind ein paar Farben, z.B. #d9e6c3 und Größen, z.B. width: 48em; oder height: 3em; ... der Rest ist original ...

Das verdächtige "acc1" ist eine ID, die vom Ersteller der Akkordeon Demo so vorgegeben wurde. Sie wird im HTML Teil der Codes angelegt und korrekt referenziert.
Auch die im HTML Code (s. u) eingebundene CSS Klasse "accordion" wird in dem in der Demo verwendeten CSS Code korrekt angelegt und definiert.

<article class="accordion">
<section id="acc1">
<h2><a href="#acc1">Title One</a></h2>

Dass die Demo bei Dir nicht so funktioniert, wie Du es erwartet hast, liegt daran, dass es eben nur eine Demo ist, die die Machbarkeit eines "Akkordeon" demonstrieren soll, mehr nicht.

Du kannst die Demo aber trotzdem erfolgreich in Deine Site übernehmen, wenn Du dafür sorgst, dass der Platzhalter nicht alleine auf der Seite steht. Er muss vertikal unter einem- oder mehreren Objekten angelegt werden und die Seite darf nicht zu viel Leerraum unterhalb haben.
So kann das dann aussehen:

Wenn Du eine andere Lösung probieren willst, dann schau Dir mal diese Demo an. Die habe ich vor ein paar Jahren mal online gestellt. Die dazu gehörenden Codes (HTML / CSS) und eine kurze Anleitung findest Du hier.

Schau´s Dir mal an...

Danke Euch, gibt es eigentlich einen Befehl, der das vorherige Fragenfenster schließt, wenn ich auf die nächste Frage klicke ?

Grüß Dich BeRo, Dein Demo ist genial, das würde ich gerne benutzen.

Nur leider bekomme ich bein öffnen der Zip-Projektdatei die Meldung der Zip-Ordner ist leer.

und wenn ich die Codes von dieser Seite hier einfüge:

http://www.webdesign-klamonfra.de/codeschnipsel/accordion-effekt.php#Artikel12

, dann erhalte ich nur Datenmüll ...

Kannst Du mir bitte behilflich sein ?

Gruß Svend

... alles gut, habs geschnallt ... läuft 😁

Danke

... vielleicht doch nicht ganz ... die ersten drei Felder klappen auf, ab Feld vier dann nicht mehr ... habe den Code einfach so weiter eingefügt :

<section>
        <input type="radio" id="c1" name="ca" value="">
        <label for="c1">Frage 1</label>
        <div>
            <h3>Antwort 1</h3>
        </div>

<section>
        <input type="radio" id="c2" name="ca" value="">
        <label for="c2">Frage 2</label>
        <div>
            <h3>Antwort 2</h3>
        </div>

<section>
        <input type="radio" id="c3" name="ca" value="">
        <label for="c3">Frage 3</label>
        <div>
            <h3>Antwort 3</h3>
        </div>

... usw.

wo ist der Fehler ?