Wie kann ich am besten durch einen Klick auf sagen wir "Mehr zeigen"
einen Text aufklappen? Hatte schon eine Lösung mit CSS gefunden, die aber nicht so richtig im Firefox funzt...Außerdem stört mich dieser Focus auf den angezeigten Sachen mit der CSS-Lösung...gibts da eine bessere Möglichkeit mit Javascript?
Dabei seit: 26.06.2007 Ort: - Alter: - Geschlecht: -
Verfasst Do 25.06.2009 08:14 Titel
Mit JQuery geht das ganz easy.
Code:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//bei Klick auf den Link mit id showbox
$('#showbox').click(function() {
//blende div mit id box aus und wieder ein ('dauer') #dauer =Millisekunden oder slow/normal/fast
$('#box').slideToggle(300);
});
});
</script>
Code:
<a href="#" id="showbox">Click me</a>
<div id="box">
Dein aufzuklappender Text.
</div>
Zuletzt bearbeitet von DesignKater am Do 25.06.2009 08:15, insgesamt 2-mal bearbeitet
irgendwie wird das was nicht angezeigt werden sollte trotzdem angezeigt...
Code:
<a href="#" id="showbox" style="padding-left:10px;"><b style="color:#cf2817;">mehr Termine...</b></a>
<div id="box">
mein text
</div>
wenn ich die seite aufrufe sieht man "meintext". muss ich noch irgendwas im stylesheet ändern oder so?
habe jetzt nur den o.g. code im body eingefügt und das dadrüber im head.
gut, jetzt hat die box im stylesheet dieses bekommen...
Code:
#box
{
display:none;
}
jetzt ist der text "mein text" zwar ausgeblendet, aber wenn ich auf "mehr termine" klicke passiert nix, d.h. der gewünschte text blendet sich nicht ein...weder im ie noch im firefox
Dabei seit: 26.06.2007 Ort: - Alter: - Geschlecht: -
Verfasst Do 25.06.2009 09:02 Titel
Google mal nach jquery-1.3.2.min.js und lad es dir runter und packt das in dein Projektverzeichnis. Und den Pfad in deiner HTML-Datei entsprechend anpassen nicht vergessen falls du die JS-Datei in einem Unterverzeichnis hast. Du brauchst natürlich die JQuery Bibliothek damit das ganze auch funzt.
Zuletzt bearbeitet von DesignKater am Do 25.06.2009 09:03, insgesamt 1-mal bearbeitet
Dabei seit: 16.03.2010 Ort: - Alter: - Geschlecht: -
Verfasst Di 16.03.2010 14:10 Titel
Bin wegen Eurer Diskussion hier mal gelandet!
Code:
<a href="#" id="showbox" style="padding-left:10px;"><b style="color:#cf2817;">mehr Termine...</b></a>
<div id="box">
mein text
</div>
Das kann ich jetzt ja nur einmal auf Grund des JavaScripts verwenden. Wenn ich X Showboxen haben möchte, was mache ich dann? Wie muss ich das JavaScript ändern? Bin in JS nicht so bewandert. Danke für Eure Mühe!
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
Mediengestalter.info ist ein Projekt von Webformatik:: Forensoftware: phpBB