Wie kann sich durch Javascript/HTML der Bereich A beim Aufklappen von Bereich B automatisch schließen, siehe CodeBSP?

Von Seitenanfang bis Head-Ende habe ich folgendes stehen, die spitzen klammern wurden im CodeBSP nicht angezeigt, stattdessen solch ein unverständlicher "& l t ;"-Quatschsinn:

html
    head
        title
            Meine Geichte-Bibliothek
        /title

        script type="text/javascript"
            function toggle(id){
                var e = document.getElementById(id);

                if (e.style.display == "none"){
                  e.style.display = "";
                } else {
                  e.style.display = "none";
                }
            }
        /script
    /head

Und folgendes CodeSP habe ich im BODY stehen:

a href="javascript:toggle('f0100')" I. Gedichte von Goethe /a  div id="f0100" style="display: none"

a href="javascript:toggle('f0101')" 01. Epirrhema /a  div id="f0101" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0102')" 02. Gefunden /a  div id="f0102" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0103')" 03. Erlkönig /a  div id="f0103" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0104')" 04. Das Göttliche /a  div id="f0104" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0105')" 05. Heydenröslein /a  div id="f0105" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0106')" 06. Osterspaziergang /a  div id="f0106" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0107')" 07. Prometheus /a  div id="f0107" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0108')" 08. Selige Sehnsucht /a  div id="f0108" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0109')" 09. Verschwiegenheit /a  div id="f0109" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0110')" 10. Willkommen und Abschied /a  div id="f0110" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0111')" 11. Zauberlehrling /a  div id="f0111" style="display: none" Text folgt /div  br

/div

Viele aufklappbare Gedichte stehen unter einem aufklappbaren Titel, dem Namen des jeweiligen Verfassers, wie Goethe, Schiller, Lessing usw. Wie kann ich es bewerkstelligen, dass sich beim Öffnen von Schiller der Bereich Goethe automatisch schließt, ohne auf irendwelcherlei externe .js-Dateien verlinken zu müssen? Ich gestehe, dass ich gewissermaßen, zumindest was JS-Belange angeht, eher ein ScriptKiddie bin. Ich habe auch einiges über Hover, also Drübergleiten mit Maus gelesen, aber um euch gegenüber ehrlich zu sein nur Bahnhof und Bratkartoffeln verstanden :(

Das habe ich denn nun davon, dass unser Informatik-Lehrer damals nur immer über Ufos und Verschörungstheorien fabulierte, anstatt uns handfesten Unterrichtsstoff über Javascript, jQuery und PHP einzuprügeln .. :// .. sniff

Falls mir jemand leicht erklärlich / verständlich da bei diesem Code helfen könnte, würde mich das wirklich S E H R freuen.

Liebe Grüße und ein schönes Wochenende.

@-}-}--- Matthias :)

HTML, programmieren, JavaScript, JQuery, Hover

Meistgelesene Fragen zum Thema Hover