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

Hilfe, ich finde keine passende Möglichkeit um einen Text auszuklappen =(

N

Niani

Neues Mitglied
Hallo!

Ich habe lange gesucht und bin nicht fündig geworden =( Ich bin ein HTML Anfänger, und habe soweit alles hinbekommen was ich bissher schreiben wollte. Nun suche ich einen Befehl/Code oder Anregungen wie ich folgendes Problem lösen kann:

Ich habe eine Aufzählung und möchte, dass die Unterpunkte im fertigen Ergebniss nur erscheinen wenn man auf den Übergeordneten Begriff klickt.

Bsp.:

Übergeordneter Begriff (Dauerhaft auf der Homepage sichtbar)
* Untergeordneter Begriff 1 (Nur sichtbar nach dem klicken auf den Übergeordneten Begriff)
* Untergeordneter Begriff 2 (" " ")
* Untergeordneter Begriff 3 (" " ")
* Untergeordneter Begriff 4 (" " ")
Bei erneutem Klicken auf den Übergeordneten Begriff sollen die Untergeordneten Begriffe wieder "verschwinden".

Ich hoffe das mir endlich jemand helfen kann =( Danke im Vorraus!

Ps.: Schreibt mir gerne anhand meines Beispiels welche Befehle ich wo einbauen muss :)
 
Mit reinem HTML geht das nicht, aber du könntest es mit JavaScript machen. Es würde zum Beispiel so funtionieren:
Code: 
<h3><div id="uebergeordneter_begriff" style="background-color:black; color:white; width:300px; padding:5px;text-align:center;" onclick="ausklappen()">Uebergeordneter Begriff</div></h3>
<div id="aufklappen_und_einklappen" style="display:none;"><ul><li>Untergeordneter Begriff 1</li><li>Untergeordneter Begriff 2</li><li>Untergeordneter Begriff 3</li><li>Untergeordneter Begriff 4</li></div>
<script type="text/javascript">
function ausklappen() {
 document.getElementById('aufklappen_und_einklappen').style.display = 'block';
 document.getElementById('uebergeordneter_begriff').onclick = einklappen;
}
function einklappen() {
 document.getElementById('aufklappen_und_einklappen').style.display = 'none';
 document.getElementById('uebergeordneter_begriff').onclick = ausklappen;
}
</script>

Die Styleangaben erkläre ich dir mal nicht... (Wenn ich es doch machen soll, frag mich einfach...)
Mit onclick="ausklappen()" sagts du, dass er die Funktion ausklappen ausführen soll. In der Funktion wird ein Element (z.B. ein DIV-Container) ausgewählt und dann wird die Angabe angegeben, die er ändern soll.
Die Eigenschaft display sagt an ob er es anzeigen soll oder nicht. (none = nicht anzeigen)

Bei Fragen schreib mich an.
 
Danke!

Vielen Dank =) Das war genau das, was ich gesucht habe =) Wenn ich noch weitere Fragen habe, melde ich mich =)


Und nochmals Danke =)
 
Bitte! :)

PS: Wenn du mehrere Sachen ausklappen willst, musst du die Funktionnamen und die IDs der DIVs ändern. (und natürlich kopieren)

Zum Beispiel:
Code: 
<h3><div id="uebergeordneter_begriff" style="background-color:black; color:white; width:300px; padding:5px;text-align:center;" onclick="ausklappen()">Uebergeordneter Begriff</div></h3>
<div id="aufklappen_und_einklappen" style="display:none;"><ul><li>Untergeordneter Begriff 1</li><li>Untergeordneter Begriff 2</li><li>Untergeordneter Begriff 3</li><li>Untergeordneter Begriff 4</li></div>
<script type="text/javascript">
function ausklappen() {
	document.getElementById('aufklappen_und_einklappen').style.display = 'block';
	document.getElementById('uebergeordneter_begriff').onclick = einklappen;
}

function einklappen() {
	document.getElementById('aufklappen_und_einklappen').style.display = 'none';
	document.getElementById('uebergeordneter_begriff').onclick = ausklappen;
}

</script>

<h3><div id="uebergeordneter_begriff2" style="background-color:black; color:white; width:300px; padding:5px;text-align:center;" onclick="ausklappen2()">Uebergeordneter Begriff</div></h3>
<div id="aufklappen_und_einklappen2" style="display:none;"><ul><li>Untergeordneter Begriff 1</li><li>Untergeordneter Begriff 2</li><li>Untergeordneter Begriff 3</li><li>Untergeordneter Begriff 4</li></div>
<script type="text/javascript">
function ausklappen2() {
	document.getElementById('aufklappen_und_einklappen2').style.display = 'block';
	document.getElementById('uebergeordneter_begriff2').onclick = einklappen2;
}

function einklappen2() {
	document.getElementById('aufklappen_und_einklappen2').style.display = 'none';
	document.getElementById('uebergeordneter_begriff2').onclick = ausklappen2;
}

</script>
So sähe das mit 2 Sachen aus...
 
Zuletzt bearbeitet:
@Programmier-Felix

Du weisst aber schon das ein div nicht innerhalb eines <h3> stehen darf.
Wobei das <div> hier sowieso absolut sinnfrei ist.

Gruss
Elroy
 
Mit jQuery/CSS-Klassen lassen sich da sehr einfach recht elegant Dinge fabrizieren.

Jedes Element mit der Klasse expandable „expandiert“ beim Anklicken alle direkten Kindelemente mit Klasse to-expand. Genauere Anpassungen müssten dann je nach konkretem Anwendungsfall vorgenommen werden.

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8" />
        <title>Expandable tree menu</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        <style type="text/css">

        .box {
            border: 1px solid #ccc;
            padding: 5px;
            margin: 20px;
        }

        .hidden {
            display: none;
        }
        </style>

        <script type="text/javascript">
        $(document).ready(function () {
            $('.to-expand').addClass('hidden');
            $('.expandable').click(function (event) {
                // Entry has children?
                if ($(this).children('.to-expand').length > 0) {
                    $(this).children('.to-expand').toggleClass('hidden');
                }
                event.stopPropagation();
            });
        });
        </script>
    </head>

    <body>

        <div class="box expandable">
            <p>Eine Box</p>
            <p class="to-expand">Ausklappbarer Inhalt</p>
        </div>

        <div class="box expandable">
            <p>Eine Box</p>
            <div class="box expandable to-expand">
                <p>Mehrere</p>
                <p>Elemente (klicken, um Kindelemente auszuklappen)</p>
                <div class="to-expand">
                    xyz
                </div>
            </div>
        </div>

        <div class="box expandable">
            <p>Eine Box</p>
            <p class="to-expand">Ausklappbarer Inhalt</p>
        </div>

        <div class="box expandable">
            <p>Eine Box</p>
            <p class="to-expand">Ausklappbarer Inhalt</p>
        </div>

    </body>

</html>
 
Elroy schrieb:
Du weisst aber schon das ein div nicht innerhalb eines <h3> stehen darf.
Wobei das <div> hier sowieso absolut sinnfrei ist.
Zum Vergrößern anklicken....

Ok. Das mit <h3> hab ich wohl übersehen. Das <div> ist dazu da, dass man überall im <div> den Text öffnen kann wenn man drauf klickt und nicht nur z.B. wenn man auf den Text klickt.

@mermshaus
Stimmt. Das wäre auch eine Methode. Vorallem ist die viel leichter und nicht so umständlich. Aber mich persönlich stört es, dass wenn man den ausgeklappten Text markieren will, sich der Text wieder schließt.


PS: Die Methode von mir war auch eine Anfänger-Methode. (Ich bin nämlich ein Anfänger in Sachen JavaScript...)
 
Ja, meine Methode braucht in jedem Fall noch Arbeit. Das mit dem Markieren ist ein sehr richtiger Einwand. ;-)

Es ist schwierig, sowas (a) „allgemein“ zu schreiben und (b) funktionstüchtig für einen speziellen Fall.

Ich wollte vor allem auf jQuery hinweisen. Das eignet sich einfach prima für sowas, auch wenn's auf den ersten Blick nicht ganz leicht zu durchblicken ist, gebe ich zu. Es ist immer gut, zu wissen, dass es sowas gibt.
 
Programmier-Felix schrieb:
Bitte! :)

PS: Wenn du mehrere Sachen ausklappen willst, musst du die Funktionnamen und die IDs der DIVs ändern. (und natürlich kopieren)

Zum Beispiel:
Code: 
<h3><div id="uebergeordneter_begriff" style="background-color:black; color:white; width:300px; padding:5px;text-align:center;" onclick="ausklappen()">Uebergeordneter Begriff</div></h3>
<div id="aufklappen_und_einklappen" style="display:none;"><ul><li>Untergeordneter Begriff 1</li><li>Untergeordneter Begriff 2</li><li>Untergeordneter Begriff 3</li><li>Untergeordneter Begriff 4</li></div>
<script type="text/javascript">
function ausklappen() {
    document.getElementById('aufklappen_und_einklappen').style.display = 'block';
    document.getElementById('uebergeordneter_begriff').onclick = einklappen;
}

function einklappen() {
    document.getElementById('aufklappen_und_einklappen').style.display = 'none';
    document.getElementById('uebergeordneter_begriff').onclick = ausklappen;
}

</script>

<h3><div id="uebergeordneter_begriff2" style="background-color:black; color:white; width:300px; padding:5px;text-align:center;" onclick="ausklappen2()">Uebergeordneter Begriff</div></h3>
<div id="aufklappen_und_einklappen2" style="display:none;"><ul><li>Untergeordneter Begriff 1</li><li>Untergeordneter Begriff 2</li><li>Untergeordneter Begriff 3</li><li>Untergeordneter Begriff 4</li></div>
<script type="text/javascript">
function ausklappen2() {
    document.getElementById('aufklappen_und_einklappen2').style.display = 'block';
    document.getElementById('uebergeordneter_begriff2').onclick = einklappen2;
}

function einklappen2() {
    document.getElementById('aufklappen_und_einklappen2').style.display = 'none';
    document.getElementById('uebergeordneter_begriff2').onclick = ausklappen2;
}

</script>
So sähe das mit 2 Sachen aus...
Zum Vergrößern anklicken....

Danke nochmal =) Genau das wäre meine nächste Frage gewesen :P
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben