• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fragen zu Bootstrap Toggle

NetAktiv

Senior HTML'ler
Hallo,

der Code unten macht mit dem Bootstrap Framework weitgehend, was ich mir wünsche, nämlich einen Text auf- und wieder zuzuklappen. Allerdings hätte ich noch gerne, dass sich nach dem Aufklappen der der Hinweis-Text von [mehr] in [weniger] ändert oder dass dieser Hinweis-Text unsichtbar wird. Das sollte funktionieren, ohne dass ich zusätzliches JavaScript mit einem onClick-Event einbinde.

HTML:
Hier etwas Text und nach dem Klick noch <a data-toggle="collapse" href="#details1">mehr</a>
<div id="details1" class="collapse">
   Hier ist mehr Text..</br>
   Hier ist mehr Text.. Klick für <a data-toggle="collapse" href="#details1">weniger</a>
</div>
 
Werbung:
Bootstrap setzt und entfernt automatisch eine .collapsed Klasse auf dein Toggle-Element. Das kannst du nutzen um den Text deines Toggle Elements zu steuern.

HTML:
Hier etwas Text und nach dem Klick noch <a data-toggle="collapse" href="#details1">
  <span class="show-more">mehr</span>
  <span class="show-less">weniger</span>
</a>
<div id="details1" class="collapse">
   Hier ist mehr Text..
</div>

CSS:
.show-more {
  display: none;
}

.collapsed .show-more {
  display: inline;
}

.collapsed .show-less {
  display: none;
}
 
Werbung:
Zurück
Oben