[Meister Lampe]

Hallo,

ich habe inzwischen schon diverse threads hier durchgelesen aber leider keine Lösung für mich entdecken können.

Mein Ziel:
tbody per Klick auf den thead ausblenden und nicht per Klick auf das Bild (rechts im thead)

Meine bisherigen Versuche an einer eigenen Tabelle die auf einer eigene Seite (angelegt mit Page Manager on Querschlaeger):

PHP-Code:

<table class="tborder" cellspacing="1" cellpadding="4" border="0" style="margin-top: 5px;">
    <thead>
      <tr>
        <td class="thead" colspan="2">
            <div class="expcolimage"><img src="{$theme[\'imgdir\']}/wcfan_portal/collapse.png" id="cat_q3_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
            <div><strong><a href="css" class="fname" id="q3">{$lang->q3}</a></strong><div class="smalltext_forum"></div></div>
        </td>
    </tr>
    </thead>
    <tbody style="display: none;{$expdisplay}" id="cat_q3_e">
      <tr>
        <td class="trow2 post_content">
            {$lang->a3}
        </td>
      </tr>
    </tbody>  
</table> 


Funktioniert mit der Standardmethode wunderbar, der Tabellenkörper wird ausgeblendet. (blauer Pfeil mit 1.)

Nun möchte ich nicht auf das Bild klicken müssen, sondern auf den Tabellenkopf klicken können um den Körper zu verstecken. (roter Pfeil mit 2.)

Ich habe schon versucht die Tabelle so anzupassen:

PHP-Code:

<table class="tborder" cellspacing="1" cellpadding="4" border="0" style="margin-top: 5px;">
    <thead id="cat_q3_img" class="expander">// HIER DIE AENDERUNG!
      <tr>
        <td class="thead" colspan="2">
            <div class="expcolimage"><img src="{$theme[\'imgdir\']}/wcfan_portal/collapse.png" alt="{$expaltext}" title="{$expaltext}" /></div>
            <div><strong><a href="css" class="fname" id="q3">{$lang->q3}</a></strong><div class="smalltext_forum"></div></div>
        </td>
    </tr>
    </thead>
    <tbody style="display: none;{$expdisplay}" id="cat_q3_e">
      <tr>
        <td class="trow2 post_content">
            {$lang->a3}
        </td>
      </tr>
    </tbody>  
</table> 


und den entsprechenden Eintrag in der general.js zu:

Code:

expanders = $$('thead.expander');

zu ändern, allerdings hilft das nicht. Der Courser wird zwar im gewünschten Bereich zum Pointer aber ausklappen lässt sich der Tabellenkörper nicht.

Da ich in Sachen JavaScript nicht der hellste bin, liegt meine Vermutung nahe, dass ich eine Anpassung vergessen habe. Kann mir da vllt jemand weiterhelfen?

Forum: <LINK>
PS: aktuelle Problemseite (FAQ) für Gäste nicht sichtbar, da noch in Entwicklung.

   

[Meister Lampe]

Inzwischen habe ich entwas experiementiert und local eine einfach html Seite mit mehreren Tabellen angelegt.
Mit diesem Code :

PHP-Code:

//< ![CDATA[
document.observe("dom:loaded", function() {
    $$('thead.togglethead').each(function(element){
        Event.observe(element, 'click', function(event) {
            Event.element(event).next('tbody').toggle();    
        });                                                            
    });         
});
//]]> 


ist es möglich jede Tabelle einzeln auf- und zuzuklappen. Leider wird die Seite nicht korrekt bzw garnicht angezeigt wenn ich das script einbinde.

Die einzige Möglichkeit die mir einfällt ist, dass ich unwissentlich zu Prototype nicht kompatiblen Code nutze. Ich kenne mich da allerdings nicht aus.
Weiß jemand einen Rat?

[MrBrechreiz]

Das was mir auf anhieb dazu einfällt und auch funzt (eben getestet) mach ein neues Collapse Bild, was den gesamten thead einnimt. Benenne es nun jeweils --> collapse und --> collapse_collapsed , beide sollten auch als gif vorhanden sein.

[Meister Lampe]

Okay, das ist ein schöner workaround allerdings beharkt sich das etwas mit der variablen Breite des Themes. Wie ich das als Hintergrundbild anpassen würde weiß ich aber wie das also <img> automatisch hinbekomme weiß ich nicht.

[Meister Lampe]

Ich habe jetzt eine Lösung gefunden. Ein eigenes Script:

PHP-Code:

function mytoggle(myelement) {
myelement.next().toggle();
}; 


und in jeden <thead> onclick eingefügt:

PHP-Code:

<table cellspacing="1" cellpadding="2" border="0" class="tborder">
<thead onclick="mytoggle($(this));"> 
<tr>

<td colspan="5" class="thead">
...
... 


Ist bestimmt nicht die feine englische Art aber funktioniert.

[MrBrechreiz]

Ja schön und gut, aber funktioniert es denn auch wenn Du die anderen Kategorein anklickst, ohne das sich die anderen öffnen/schliessen ?

[Meister Lampe]

Es wird immer nur die angeklickte Tabelle auf- und zugeklappt. Allerdings wird die Tabelle auch geklappt wenn man auf den Link zum Forum klickt. Mit $(this) gebe ich der Funktion mytoggle() immer das geklickte DOM Element mit und in der Funktion wird das "auf das geklickte folgende" Element getoggelt.

Es sei noch erwähnt, dass mit dieser Methode die Status der Tabellen (ob zugeklappt oder aufgeklappt) nicht gespeichert werden.

[MrBrechreiz]

Also wird das Toggle nicht im Cookie gespeichert für schon auf oder zu und dann damit gemerkt beim refresh der Seite ?