Ausklappbare Texte

ramon17 · 05.08.2009

Hey ich bin noch HTML jungfrau :'(
arbeite aber daran es zu ändern, doch jetzt steh ich vor einer aufgabe die ich überhaubt nicht lösen kann, ich hoffe ihr könnt mir weiter helfen.

Es soll so sein, wenn ich auf "wer wir sind" klappt sich der text runter, und wenn ich auf "was ist deine aufgabe" klicke sich der andere geöfnette text schließt

Ich hoffe das macht man in HTML, und wenn nicht bitte entschuldigt das ich es in HTML gepost habe, und schiebt es bitte in die richtige rubrik, denn ich brauch wirklich hilfe dabei

danke im vorraus

Titel korrigiert

Kronod · 05.08.2009

AW: Ausklappbare Texte

mein Tip wäre, es mit javascript zu machen.

wenn du auf eine Frage klickst, wird das untermenü über "name" oder "id" geöffnet, gleichzeitig hinterlegst du in einer anderen Variablen "name" oder "id" des gerade geöffneten Untermenüs.

Beim klicken auf eine andere Frage, wird das hinterlegte dann unsichtbar gemacht und das aktuelle hinterlegt und sichtbar gemacht

hoffe das war so verständlich.

Hilfe gibts hier und

Gruß

Kronod

lordgoldy · 06.08.2009

AW: Ausklappbare Texte

ramon17 schrieb:
Hey ich bin noch HTML jungfrau :'(

Dann mit gleich mit Java einsteigen?
Ich denke eher nicht.
Grundlagen sind alles und wenn er HTML nicht versteht brauch er mit dem Rest nicht anfangen.

BTT:
Wie schnell brauchst du es?
Das ist die Frage.
Ich hab mich hier noch nicht durch den WEbdesign Bereich gearbeitet, aber ich bin sicher dort findet sich etwas.
Wie gesagt Grundlagen.
Hm du wilst das ganze als Textfeld.
Ansonsten hätte ich gesagt füge den text als Dropdownmenu ein.
Aber auch das ist leider für nen Anfänger nicht ohne weiteres machbar.
(Nein ich habe nicht die große Ahnung, aber aus eigener Faulheit weiß ich was passiert wenn man am Anfang nur Quellcode kopiert.)

Also mein Tip:

Machs erstmal auf die einfacher Art.
Mach die Links und lass sie normal zu Kontent verweisen.
Wenn du dann tiefer in der Materie steckst kommen neue Möglichkeiten von alleine.
Und veränderungen an der Seite zeigt den besuchern das sich etwas tut.

MFG

cebito · 06.08.2009

AW: Ausklappbare Texte

lordgoldy schrieb:
Dann mit gleich mit Java einsteigen?
Ich denke eher nicht.

Stimmt, Java hat hier nichts verloren.

@ramon - hatten wir grad erst vor 3 Tagen im Forum , schau dir mal #12 von stroyer an.

Tack · 06.08.2009

AW: Ausklappbare Texte

Moin Moin

Unter "Demo 1" findest du genau was du suchst

Link : Dynamic Drive DHTML scripts- Switch Content Script

... und es wird auch beschrieben, wie du es in deine Website einfuegst.

Boje Tack

xyzutschixyz · 14.08.2009

AW: Ausklappbare Texte

So hier habe ich mal schnell für dich gemacht. Ich hoffe es hilft dir bisschen weiter. Kopiere das einfach und probier den Code mal aus.

HTML:

<html>
<head>
<title>Ausklappmenü</title>
<script language="JavaScript">
function ausklappen() {
/* Hier ist die Funktion "ausklappen" die unten mit dem Link aufgerufen wird */
if (document.getElementById("ausgeklappter_text").style.display == "none") {
document.getElementById("ausgeklappter_text").style.display = "block";
}
else {
document.getElementById("ausgeklappter_text").style.display = "none";
}
/* Hier wird entschieden, ob der Text, der ausgeklappt werden soll, schon ausgefahren wird oder nicht,
wenn ja, dann wird er eingefahren, wenn nein, dann wird er ausgefahren */

}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="width:350px; background-color:#C9C9C9;">
<a href="#" onclick="ausklappen()">Hier den Text eingeben, auf den geklickt werden soll</a> <!-- Hier ist der Link, der die Funktion ausführt !-->
<div id="ausgeklappter_text" style="display:none; background-color:#A9A9A9;">
Hier steht dann der Text, der ausgeklappt werden soll.
</div>
</div>
</body>
</html>

saint44 · 14.08.2009

AW: Ausklappbare Texte

wenn du dreamwiever hast, kannste das auch ganz einfach mit den SPRY vorgabe-scripten machen.

Ditin · 15.08.2009

AW: Ausklappbare Texte

Hallo,

und noch eine Alternative ohne Javascript

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Ohne Titel 1</title>
    
<style type="text/css">
#wrapper  {
    width:400px;
    border: 1px solid black;
}
#wrapper div  {
    padding: 5px;
}
#wir:hover #wirSub { 
    display:block;
}
#wirSub   {
    display:none;
}
#was:hover #wasSub { 
    display:block;
}
#wasSub   {
    display:none;
}
</style>

</head>

<body>
<div id="wrapper">

    <div id="wir">
        - Wer sind wir?
        <div id="wirSub">
            bitte helft mir, dieses umzusetzen<br />
            bitte helft mir, dieses umzusetzen<br />
            bitte helft mir, dieses umzusetzen
        </div>
    </div>

    <div id="was">
        - Was sind Deine Aufgaben?
        <div id="wasSub">
            bitte helft mir, dieses umzusetzen<br />
            bitte helft mir, dieses umzusetzen<br />
            bitte helft mir, dieses umzusetzen
        </div>
    </div>

</div>

</body>
</html>

Das Klick Event wird durch CSS nicht unterstützt deswegen das Hover Attribut. Ich hoffe es hilft Dir
Mfg.

marcantons · 09.08.2022

xyzutschixyz schrieb:

AW: Ausklappbare Texte

So hier habe ich mal schnell für dich gemacht. Ich hoffe es hilft dir bisschen weiter. Kopiere das einfach und probier den Code mal aus.

HTML:

<html>
<head>
<title>Ausklappmenü</title>
<script language="JavaScript">
function ausklappen() {
/* Hier ist die Funktion "ausklappen" die unten mit dem Link aufgerufen wird */
if (document.getElementById("ausgeklappter_text").style.display == "none") {
document.getElementById("ausgeklappter_text").style.display = "block";
}
else {
document.getElementById("ausgeklappter_text").style.display = "none";
}
/* Hier wird entschieden, ob der Text, der ausgeklappt werden soll, schon ausgefahren wird oder nicht,
wenn ja, dann wird er eingefahren, wenn nein, dann wird er ausgefahren */

}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="width:350px; background-color:#C9C9C9;">
<a href="#" onclick="ausklappen()">Hier den Text eingeben, auf den geklickt werden soll</a> <!-- Hier ist der Link, der die Funktion ausführt !-->
<div id="ausgeklappter_text" style="display:none; background-color:#A9A9A9;">
Hier steht dann der Text, der ausgeklappt werden soll.
</div>
</div>
</body>
</html>

Hey,

Ich habe den Code gerade kopiert und versuche gerade noch die Schriftgröße anzupassen. Irgendwie scheint es aber nicht zu funktionieren, da ich noch ein Newbie bin. Könnte mir jemand verraten, an welcher Stelle ich das wie schreiben muss, um am Ende eine Schriftgröße von 32 zu haben?

Bzw wie kann ich das umschreiben, damit ich mehrere untereinander habe und das nicht immer nur das oberste aufgeht?

Liebe Grüße

draupnir · 09.08.2022

Code:

<html>
<style>
.big {
    font-size: 32;
}
</style>

<body>
<p>Normal und <span class="big">gross</span> und Ende.</p>
</body>
</html>

So wird das Wort "gross" in 32 px geschrieben.