HILFE: Reproduzieren eines Aufklapptextes

Hallo liebe Community,

ich versuche mich nach etlichen Jahren mal wieder daran für eine Bekanntschaft eine Website zu bauen. Soweit funktioniert alles ganz gut. In meiner aktuellen Sitzung möchte ich gerne den Content-Bereich mit Klapptexten füllen sodass man nicht sofort mit Text umgehauen wird. Ich habe mir hierfür ein Youtube-Tutorial herausgesucht und dieses entsprechend umgesetzt auf meine Bedürfnisse. Der erste Klapptext funktionierte einwandfrei. Das Scaling stimmt etc... Jedoch wenn ich nun einen zweiten Klapptext Copy&Paste wachsen diese ineinander zusammen, ohne das sie überhaupt aufgeklappt sind. Ich kann das leider nur schwer beschreiben. Ich dachte zuerst an die CLASSes und IDs und habe diese individualisiert sodass jeder sein "eigenes Reich" hat.. mit eher wenig Erfolg.

Vielleicht kann mir jemand hierbei helfen sodass ich zumind. drei dieser Klapptexte in meinen Content-Bereich integrieren kann oder gar einen neuen Ansatz der von einem *newb* wie mir umgesetzt werden kann?

Vielen Dank für eure Hilfe!

<div class="content1" align="center">
    <div class="contentpnl">
    <div class="stylebox"><h3>Dienstleistung</h3></div>
    
    <input type="checkbox" id="nav-toggle" class="nav-toggle">    
    <label class="nav-toggle-label" for="nav-toggle"><span class="nav-design">Autowäsche</span></label>
    <nav>
        <ul class="nav-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </ul>
    </nav>
    
    <div id="spaceholder1" style="height: 200px">
    
    
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <label class="nav-toggle-label" for="nav-toggle"><span class="nav-design">Reifenmontage</span></label>
    <nav>
        <ul class="nav-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </ul>
    </nav>

    
</div>
</div>

.stylebox {
    margin:auto;
    border-style:solid;
    border-color:black;
    border-width:1px;
    box-shadow: 15px -10px #1F799C;
    margin-bottom: 50px;
    border-radius: 10px 10px 10px 10px;
    
}

.content1 {
    left: 0;
    width: 100%;
    color:black;
    text-align:center;
}

.contentpnl {
    background:#FFFFFF;
    width:70%;
    margin: 0 auto;
    margin-bottom:15px;
    
}


/* Navigation */

nav {
    display:none;
}

.nav-toggle {
    display:none;
}

.nav-toggle:checked ~ nav {
    display:block;
}

.nav-design {
    width: 100%;
    padding-left:30%;
    padding-right: 30%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-style:solid;
    border-color:black;
    border-width:1px;
    box-shadow: 15px -10px #1F799C;
    margin-bottom: 20px;
    font-size:large;    
}

.nav-content {
    text-align:center;
}

ul, li {
    list-style:none;
}

Hallo Sempervivum,

Vielen Dank für deine Antwort. Punkt eins werde ich mir direkt anschauen. Ich hatte es so verstanden dass dieses Notwendig sei. Danke für den Tipp! Die IDs hatte ich bereits eindeutig gemacht. Heißt ich habe dafür gesorgt das im zweiten Klapptext jede ID ein Unikat ist und somit nirgendwo anders zu finden ist. Leider änderte dies nichts an dem stark verschobenen Bild. Ich werde beides umsetzen und mich mal mit dem section-Tag auseinander setzen. Klingt natürlich deutlich besser so wie ich das jetzt verstehe.

Ich werde mich melden. Vielen Dank!

Erneut Hallo Sempervivum,

Das <span/> habe ich direkt abgelöst. Ebenfalls habe ich erneut einen Zweiten Klapptext erstellt und mit individuellen ID's versorgt. Und genau an dieser Stelle ist mir mein grober Fehler klar geworden - ich vergaß die style.css entsprechend zu erweitern . Ist wohl den letzten Nächten anzuhängen da ich einfach nicht mehr aufhören konnte .

Ebenfalls habe ich mir das section-tag angeschaut und baue dieses ebenfalls mit in die Seite ein. Aktuell soll nur das grobe Design ziemlich final sein und der Inhalt, einschließlich Klapptext, Google-Map etc., soll noch als Demo dienen sodass sich entschieden werden kann wie es final aussehen soll.

Meinen herzlichsten Dank!