Erweiterung einer Togglefunktion

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Erweiterung einer Togglefunktion

    Hallo Forum,

    ich habe im Netz ein JS-Script gefunden, mit dem ich 2 Div`s ein- bzw. ausblenden kann. Zusätzlich wird noch dem Link eine Class "active" bzw. "inactive" mit gegeben:

    Quellcode

    1. function toggle_visibility(id, alink) {
    2. var e = document.getElementById(id);
    4. if (e.style.visibility == 'visible'){
    6. e.style.visibility = 'hidden';
    7. if (alink)
    8. alink.className = "inactive";
    10. } else {
    12. e.style.visibility = 'visible';
    13. if (alink)
    14. alink.className = "active";
    16. }
    17. }
    Alles anzeigen


    Die Funktion wird so aufgerufen:

    Quellcode

    1. › Text 1
    2. › Text 2


    Das funktioniert soweit auch recht gut, nur benötige ich noch folgende 2 weitere Funktionalitäten:
    1. Wenn ich "Text 2" aufrufe nachdem ich "Text 1" geöffnet habe, wird "Text 1" nicht wieder geschlossen, so dass ich die beiden Boxen übereinander liegen habe.
    2. In den Boxen habe ich noch einen Link zum Schließen der Box eingefügt....
      Wenn ich die Box hierüber schließe, dann wird den ursprünglichen Link nicht die CLASS "inactive" zugewiesen


    Da ich leider kein Programmierer bin, bekomme ich es einfach nicht hin...

    Könnt Ihr mir vielleicht weiterhelfen?

    Vielen Dank im voraus!

    IchDuErSieEs

    //edit by vince - code formatiert

  • IchDuErSieEs schrieb:

    Hallo Forum,

    hallo :D

    IchDuErSieEs schrieb:

    function toggle_visibility(id, alink) { var e = document.getElementById(id); if (e.style.visibility == 'visible'){ e.style.visibility = 'hidden'; if (alink) alink.className = "inactive"; } else { e.style.visibility = 'visible'; if (alink) alink.className = "active"; }}

    Das nächste mal bitte nicht in einer Zeile ;)

    IchDuErSieEs schrieb:

    Die Funktion wird so aufgerufen:

    Seit wan ruft man so eine Funktion auf? 8|


    IchDuErSieEs schrieb:

    Das funktioniert soweit auch recht gut, nur benötige ich noch folgende 2 weitere Funktionalitäten:
    Wenn ich "Text 2" aufrufe nachdem ich "Text 1" geöffnet habe, wird "Text 1" nicht wieder geschlossen, so dass ich die beiden Boxen übereinander liegen habe.In den Boxen habe ich noch einen Link zum Schließen der Box eingefügt....
    Wenn ich die Box hierüber schließe, dann wird den ursprünglichen Link nicht die CLASS "inactive" zugewiesen


    HTML-Code? ;)

    IchDuErSieEs schrieb:

    Da ich leider kein Programmierer bin, bekomme ich es einfach nicht hin...

    w3schools.com/js/ ;)

  • Hallo zusammen,

    JaffaCoder schrieb:

    Das nächste mal bitte nicht in einer Zeile
    Das habe ich versucht, nur wurden die Zeilenumbrüche wieder eingerückt... Ich habe mir den Text aus Notepad++ formatiert kopiert und hier eingefügt. In der Vorschau hat es auch noch richtig ausgesehen...

    JaffaCoder schrieb:

    Seit wan ruft man so eine Funktion auf?
    Sorry, wenn ich mich falsch ausgedrückt habe...

    JaffaCoder schrieb:

    HTML-Code?
    Hier der Ausschnitt aus dem Quell-Text (die Seiten werden mit dem CMS "Contao" erstellt):

    Div mit den Links:

    Quellcode

    1. <div class="ce_text rechts block" id="alink"> <p class="box"> <a id="alink" class="inactive" title="› Link 1" onclick="toggle_visibility('beschreibung',this);">› Link 1</a><br /> <a id="alink" class="inactive" title="› Link 2" onclick="toggle_visibility('detail',this);">› Link 2</a> </p></div>


    Div mit den Boxen:

    Quellcode

    1. <div class="block" id="beschreibung"> <h1 class="box">Überschrift</h1> <p class="box">Text... Text... Text...<span class="box"><a title="› zurück" ???>› zurück</a></span></p></div>


    Quellcode

    1. <div class="block" id="detail"> <h1 class="box">Überschrift</h1> <p class="box">Text... Text... Text...</p></div>


    JaffaCoder schrieb:

    http://www.w3schools.com/js/
    Danke für den Link, aber ich befürchte in dieser Hinsicht bin ich ein ein hoffnungsloser Fall...

    Nochmals Danke für eure Hilfe!
    IchDuErSieEs