jQuery toggle

[Chriz]

Hallo,

bin halbwegs neu bei jQuery() (bisher fast nur YUI) und möchte einen Aufklappen/Zuklappen Link für einen Container schreiben.

$("#containerName").toggle("slow")

ist schonmal fast was ich suche. Meine Quelle ist diese Seite:
.toggle() – jQuery API

Jetzt möchte ich aber zusätzlich noch, dass sich das Linklabel von "<img icon1> aufklappen" in "<img icon2> zuklappen" ändert. Habe es schon so probiert:

<?php
        $containerId = $this->view->translate()->toJs("#" . $this->_containerId);
        $open  = $this->view->iconHelper()->toggleHide() . " "
               . $this->view->translate("COMMON_TOGGLE_HIDE")->toHtml();
        $close = $this->view->iconHelper()->toggleShow() . " "
               . $this->view->translate("COMMON_TOGGLE_SHOW")->toHtml();
        

        $xhtml = <<<XHTML
<a href="javascript:void(0)" onclick="$($containerId).hide('slow');\$('span').toggle()">
    <span>$open</span>
    <span style="display: none">$close</span>
</a>

XHTML;
        return $xhtml;

So richtig sinnvoll ist das ja aber nicht, ich bräuchte etwas, dass die <span>-Tags innerhalb von "this" togglet. $(this).$('span') in etwa. Das klappt leider nicht, beim $ von $('span') wird mir ein Fehler angezeigt.

Kann mir da jemand von euch einen Tipp geben?

[Chriz]

Habs, auch wenn ich mir nicht vorstellen kann, dass es die eleganteste Lösung ist.

<?php
        $containerId = $this->_containerId;
        $hideText    = $this->view->iconHelper()->toggleHide() . " "
                     . $this->view->translate("COMMON_TOGGLE_HIDE")->toHtml();
        $showText    = $this->view->iconHelper()->toggleShow() . " "
                     . $this->view->translate("COMMON_TOGGLE_SHOW")->toHtml();
        $hideAnchor  = "toggleContainer-" . $this->_uniqueId . "-hide";
        $showAnchor  = "toggleContainer-" . $this->_uniqueId . "-show";
        $style       = ' style="display:none"';
        $hideStyle   = ($this->_status == 0) ? $style : "";
        $showStyle   = ($this->_status == 1) ? $style : "";

        $xhtml = <<<XHTML
<a href="javascript:void(0)" class="toggle" $hideStyle id="$hideAnchor" onclick="$('#$containerId').hide('slow');$(this).hide();$('#$showAnchor').show()">$hideText</a>
<a href="javascript:void(0)" class="toggle" $showStyle id="$showAnchor" onclick="$('#$containerId').show('slow');$(this).hide();$('#$hideAnchor').show()">$showText</a>

XHTML;
        return $xhtml;
?>

[nikosch]

Könntest Du viell. mal ein HTML-Beispiel für die beiden Zustände (ohne Events) machen? Der Code ist echt schwer zu lesen. Bin sicher, da gibts noch ne schönere Variante.

[Manko10]

Hi!
Wenn du schon jQuery nutzt, dann lass doch bitte diese blöden onclick-Attribute weg.
Also ich für meinen Teil würde einfach prüfen, ob das Element bereits eingeklappt wurde und das geht einfacher, als du vielleicht denkst:

$('.mylink').click(function() {
    $('.elementToToggle').toggle();
    if ('none' == $('.elementToToggle').css('display')) {
        $(this).text('Aufklappen');
        return;
    }
    $(this).text('Einklappen');
}); 

Ist jetzt allerdings ungeprüft.

[nikosch]

<div id="toggleContainer" class="(hidden) js_visible">
  Toggle mich
</div>
<a href="toggleContainer" rel="chapter" class="toggle hidden js_visible">
    <span class="openState">$open</span>
    <span class="closedState">$close</span>
</a>

So in etwa würde ich das Problem angehen. Bin nicht hundertpro sicher, ob das mit dem href so valide ist.

- href gibt die ID/den Namen des Toggle-Inhalts an (das muß dann die JS Funktion auswerten), vielleicht auch #toggleContainer für eine entspr. ID benutzen
- rel soll der nicht-URL-Ressource Rechnung tragen
- hidden soll via CSS den Toggle Link verstecken
- js_visible soll ihn wieder anzeigen, wenn JS verfügbar ist. Dementsprechend müßte der Toggleinhalt gestaltet sein, dort je nach Anfangsstatus
- openState „adressiert“ den Inhalt für Anzeige-Link und vice versa. Den Bezeichner müßte JS auswerten

Ich arbeite das mal aus.

[Chriz]

onclick ist ja in Ordnung, ich will nicht für jede Auf-/Zuklapp-Aktion den onDOMReady Eventhandler beauftragen müssen. Im Moment klappt es soweit.

Beim Klick toggle() ich den Zielcontainer (hide) und verstecke den aktuellen Anchor ("zuklappen"), zeige dafür den "aufklappen" Anchor an. Bei dem läufts umgekehrt:
Zielcontainer togglen (show), sich selbst verstecken und den Zuklappen-Anchor anzeigen.

@Manko10: Ich glaube text() habe ich gesucht, kann ich da auch HTML übergeben? Sind wie gesagt nicht nur Texte, sondern ist auch jeweils ein Icon dabei.

[Manko10]

onclick ist ja in Ordnung, ich will nicht für jede Auf-/Zuklapp-Aktion den onDOMReady Eventhandler beauftragen müssen. Im Moment klappt es soweit.

Verstehe ich nicht. Was hat das mit DocumentReady zu tun?

Beim Klick toggle() ich den Zielcontainer (hide) und verstecke den aktuellen Anchor ("zuklappen"), zeige dafür den "aufklappen" Anchor an. Bei dem läufts umgekehrt:
Zielcontainer togglen (show), sich selbst verstecken und den Zuklappen-Anchor anzeigen.

Wozu zwei Trigger-Links? Einer reicht doch völlig aus. Oder missverstehe ich dich?

Ich glaube text() habe ich gesucht, kann ich da auch HTML übergeben? Sind wie gesagt nicht nur Texte, sondern ist auch jeweils ein Icon dabei.

Für HTML gibt es die adäquate Funktion html(). Wenn es nur um Icons geht, würde ich aber zu CSS greifen statt zu Extra-Markup.

[nikosch]

Wie immer sorry für meinen Coding-Stil. Fragen? Nur her damit.
Wie man sieht (Auskommnetiert) funktioniert das Ganze nicht für mehrere Schalter (dafür müsste man das toggle-Objekt via data() an das div-Element binden o.ä.), wohl aber für mehrere Zielobjekte eines Schalters:

<style>
  .hidden                {color:#f00;}
  .js .hidden.js_visible {color:#0f0;}
  .js .non_js_visible    {color:#f00;}
  .non_js_visible        {color:#0f0;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">


toggeling = function (element , settings) {


  this.settings = {
    openerItem : '.openState'    ,
    closerItem : '.closedState'  ,
    getState   : function (element)
                   {
                   return (element.hasClass ('hidden'));
                   }              ,
    element    : element
    };


  this.setToggleDisplay = function ()
    {
    this.settings.target.toggleClass ('hidden' , this.settings.state);
    this.settings.target.removeClass ('non_js_visible');

    this.settings.opener.toggleClass ('hidden' , this.settings.state);
    this.settings.closer.toggleClass ('hidden' , ! this.settings.state);
    }


  this.addHandlers = function ()
    {
    var selfInstance = this;

    $(element).click (function () 
      {
      selfInstance.settings.state = ! selfInstance.settings.state;
      selfInstance.setToggleDisplay ();
      });
    }


  this.init = function ()
    {
    
    jQuery.extend (this.settings , settings || {});
    jQuery.extend (this.settings , {
                                   target  : $($(element).attr('href')) ,
                                   opener  : $(this.settings.openerItem , element) ,
                                   closer  : $(this.settings.closerItem , element) ,
                                   }
                  );

    this.settings.state = this.settings.getState (this.settings.target);
    
    $(element).attr('href' , 'javascript:void(0)');


    this.setToggleDisplay ();
    }
  
  this.init ();
  this.addHandlers ();
  }

$(document).ready(function() {

  $('.toggle').each (function () {new toggeling (this)});
  $('.toggle2').each (function () {new toggeling (this , 
                                  {
                                  openerItem : '.opener'  ,
                                  closerItem : '.closer'
                                  }
                                  )});


  $('body').addClass ('js');
});
</script>

<body>

  <div id="toggleContainer" class="hidden non_js_visible">
    Toggle mich
  </div>
  <a href="#toggleContainer" rel="chapter" class="toggle hidden js_visible">
      <span class="openState">opener</span>
      <span class="closedState">closer</span>
  </a>
  <!--
  <br />
  <a href="#toggleContainer" rel="chapter" class="toggle hidden js_visible">
      <span class="openState">opener</span>
      <span class="closedState">closer</span>
  </a>
  -->

  <div class="toggleContainer2">
    Toggle mich
  </div>
  <div class="toggleContainer2">
    Toggle mich
  </div>

  <a href=".toggleContainer2" rel="chapter" class="toggle2 hidden js_visible">
      <span class="opener">opener</span>
      <span class="closer">closer</span>
  </a>

</body> 

Die Auf/Zu-Statusse sind hier mit grün/rot dargestellt. Das Beispiel ist etws komplexer, weil auch ein Status für nicht verfügbares JS abgebildet werden soll.
.

[Manko10]

Ich dachte, Chriz nutzt jQuery. Wozu alles nachprogrammieren?

[nikosch]

Meinst Du mich?

[nikosch]

Wozu zwei Trigger-Links?

Ich glaube text() habe ich gesucht

Ich kann mir gut Anwendungszwecke für die spans vorstellen. Schön ist auch, dass man das vollständig über Templates angeben kann. Und, dass der Togglelink den Fokus nicht verliert.

[Manko10]

Den Prästatus kannst du auch mit nur einem Toggle-Link serverseitig bereits festlegen. jQuery nutzt hier siw Inline-Styling-Angabe display: none für den Endstatus beim Schließen. Was meinst du mit dem Fokus? Wenn du nur einen Link nutzt, geht der Fokus nicht verloren, bei zweien hingegen schon, es sei denn, du setzt ihn manuell.
Ich würde einfach einen Link toggeln, wie ich oben schon angegeben habe.

[nikosch]

Ja. er möchte aber zwei verschiedene Link-Beschriftungen. Also muss man
a) zwei Links benutzen
b) die obige Span-Variante
c) den Text des Toggelers ändern. Und damit auch irgendwo hinterlegen (JS-seitig)

Ich persönlich finde toggle() über inline-Style doof. Weil man damit nicht mehr so unabhängig ist, im CSS das Verhalten für „nicht sichtbar“ einstellen zu können.

[Manko10]

Ohne Inline-Styling kommst du bei JavaScript-Animationen nicht aus. Alles, was über element.style.bla geht, wird ins Inline-Styling geschrieben. Wenn du den Krams serverseitig aber lieber über eine Klasse setzt, dann hindert sich ja nichts daran, am Anfang einmal

$('.hidden').trigger('click');

// oder

$('.hidden').hide();

// oder direkt

$('.hidden').css('display', 'none'); 

auszuführen.
Ich verstehe aber immer noch nicht, wozu zwei verschiedene Links für zwei verschiedene Link-Beschriftungen benötigt werden. Das klingt irgendwie nach unnötiger Markup-Vermüllung.
Außerdem erschließt sich mir noch nicht ganz, wozu die Spans getoggelt werden müssen. Sind die die Inhalte drinnen? Ein Inhalt für den geschlossenen Zustand, einer für den geöffneten? Ich verstehe nicht ganz, worauf Chriz hinaus will. Sollen hier zwei Inhaltsbereiche per Klick ausgetauscht werden? Wenn ja, ist toggle() wohl die falsche Variante, die Funktion ist dafür gedacht, einen Bereich ein- und auszuklappen, weniger um zwei Bereiche auszutauschen.

[nikosch]

Ohne Inline-Styling kommst du bei JavaScript-Animationen nicht aus.

Was meinst Du? Dass jQuery-Animationen auf display:none basieren oder was?

wozu zwei verschiedene Links für zwei verschiedene Link-Beschriftungen benötigt werden

Naja, statt Beschriftung kann es ja auch beliebig komplexer werden. Noch mit nem Image oder so..