Fragen zu Bootstrap Toggle

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

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
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>
 
  • Like
Reaktionen: Sempervivum
Werbung:

Marv

Mitglied
6 November 2010
411
9
18
Milkyway
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;
}
 
  • Like
Reaktionen: NetAktiv
Werbung:
Werbung: