Erweiterung einer Togglefunktion

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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:

    Source Code

    1. function toggle_visibility(id, alink) {
    2. var e = document.getElementById(id);
    3. if (e.style.visibility == 'visible'){
    4. e.style.visibility = 'hidden';
    5. if (alink)
    6. alink.className = "inactive";
    7. } else {
    8. e.style.visibility = 'visible';
    9. if (alink)
    10. alink.className = "active";
    11. }
    12. }
    Display All


    Die Funktion wird so aufgerufen:

    Source Code

    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 wrote:

    Hallo Forum,

    hallo :D

    IchDuErSieEs wrote:

    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 wrote:

    Die Funktion wird so aufgerufen:

    Seit wan ruft man so eine Funktion auf? 8|


    IchDuErSieEs wrote:

    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 wrote:

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

    w3schools.com/js/ ;)
  • Hallo zusammen,

    JaffaCoder wrote:

    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 wrote:

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

    JaffaCoder wrote:

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

    Div mit den Links:

    Source Code

    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:

    Source Code

    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>


    Source Code

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


    JaffaCoder wrote:

    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