Inne Zawijanie się subfor w jquery

wersja skryptu MyBB: 1.4
adres forum: ---
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Jak zrobić aby były dynamicznie zwijane subfora [+] i [-]. najlepiej w jquery?

teoretycznie gra nie warta swieczki bo subfora sa zakodowane na tabelkach, ktore niezbyt chetnie sie "zwijaja" efektami jQuery. Juz lepiej effect.toggle z scriptaculousa niejako 'wbudowanego' w mybb

a mogłbyś mi pomóc z użyciem tego? albo jakoś naprowadzić jakie pliki zmienić itd.

Dołączam się do prośby, szukam / próbuję to rozwiązać od kilku miesięcy i wciąż nic.
Jeśli ktoś pomoże to pomógł + reputacja poleci.

spróbuje coś pokombinować, ale jak by ktoś powiedział mi który plik opowiada za zwijanie to domyślnie to byłbym bardzo wdzięczny.



Coś pokombinowałem, ale narazie jest problem bo zwija tylko pierwszy dział, a reszta nie działa (nie zwija się - usunelem [+] i [-] ) Narazie niewiem jak to naprawić, jutro pokombinuje jeszcze.
zmieniamy to w szablonach -> Opis działu -> forumbit_depth1_cat (zrobcie kopie) tu to co zrobilem do tej pory:

<style type="text/css">
.buttons {
    background: url(https://webboard.pl/wiki.php?file/zwijany-panel-jak-w-ipb-czy-vb/arrowleft.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}

.clickedbuttons {
    background: url(https://webboard.pl/wiki.php?file/zwijany-panel-jak-w-ipb-czy-vb/arrowright.png) no-repeat;
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
}
</style>



<table border="0" cellspacing="0" cellpadding="0" class="tborder2">
<thead>
<tr>
<td class="thead" colspan="5">
<div class="theadleft"></div>
<div class="theadright"></div>
<div class="theadmain">
<div class="expcolimage"><a id="button" class="buttons"></a></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</div>
</td>
</tr>
</thead>
</table>





<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>




    <script type="text/javascript">
jQuery.noConflict();
    jQuery(function() {
        //run the currently selected effect
        function runEffect(){
            //get effect type from
            var selectedEffect = 'slide';

            //most effect types need no options passed by default
            //var options = {};
            //check if it's scale or size - they need options explicitly set
            //if(selectedEffect == 'scale'){  options = {percent: 0}; }
            //else if(selectedEffect == 'size'){ options = { to: {height: -1000,width: -960} }; }

            run the effect
           jQuery("#effect").slideToggle("slow");


                   //most effect types need no options passed by default



        };

        //set effect from select menu value
        jQuery("#button").click(function() {
            jQuery(this).toggleClass("clickedbuttons")
            runEffect();
            return false;
        });

    });
    </script>








<div id="effect" class="ui-widget-content ui-corner-all">



<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>







</div>
        <br /> 


Hmm, tego jestem ciekaw. Rzeczywiście tylko 1 zwija.
Spróbuję zajrzeć do tego. Póki co, dzięki za chociaż coś.

#edit:
Chyba już coś mam.
Można zrobić mniej więcej coś takiego:

<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" onclick="Effect.toggle('cat_{$forum['fid']}_e','BLIND'); return false;" /></div>

Teraz próbuję to jakoś w całość zlepić.


#edit2:
Mam coś takiego:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" width="100%">
<p><thead>
<tr>
<td class="thead" colspan="5">
<div class="expcolimage">
&nbsp;
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>
<button>Toggle</button>
<img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" onclick="$('cat_{$forum['fid']}_e').slideToggle('slow'); return false;" class="expander" alt="{$expaltext}" title="{$expaltext}" /> </div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
</p>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="135" align="right" style="white-space: nowrap"><span class="smalltext"><strong>Statystyki</strong></span></td>
<td class="tcat" width="225" align="left"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />

W tym wypadku obrazek rozwijania stoi jak drewno i nic nie robi, ale za to button, który jest obok niego robi jakby efekt fal. Wszystko na forum faluje. Tzn. działy.
Wie ktoś może jak zrobić, by tylko jeden dział zwijał się?

mam rozwiązanie, a mianowicie http://community.mybb.com/thread-83522.html

patrz tez na post na 2giej stronie to by sie przydało zrobić (efekt dużo lepszy)

Nie widzę sensu produkowania się nad tym...

Tabelki po prostu zwijają się do DUPY. Będzie się ciąć, itd.

Apropo waszych przykładów...

Coś pokombinowałem, ale narazie jest problem bo zwija tylko pierwszy dział, a reszta nie działa

AYFK?
No to oczywiscie bo nadałeś takie samo ID kilkunastu elementom... Po drugie to ogólnie w swoich zamyśle zrobienia bajeru do szpanu zapomnieliście o użyteczności... Niestety, zwijać to się to może będzie ale po przeładowaniu strony będzie dalej rozwinięte. Normalnie mybb robi to przez protkowe .hide i klase od ciastek. Podłączcie się pod to bo takie patenty są ch warte.

A jak chcecie sie bawic to
jscripts/general.js
linie 716-761 ale jquery tu nie upchniecie...
za to upchniecie effect.toggle z scriptaculousa
http://madrobby.github.com/scriptaculous/effect-toggle/
ale nie zwiniecie tym tabelki.

@edit
a na dowód mojej własnej omylności godzine próbowałem to zrobić i nic... Cała tabele zwinie, ale pojedynczego TR'a czy nawet kolumny... Za ha. Może SR coś wymyśli, on tam oblatany w JS.

Ludzie, udało się.
Oczywiście pomógł Victor, któremu serdecznie dziękuję.
Należy otworzyć plik jscripts/general.js
Linie od 716-761 zamienić na:

expandCollapse: function(e)
    {
        element = Event.element(e)
        if(!element || !element.controls)
        {
            return false;
        }
        var expandedItem = $(element.controls+"_e");
        var collapsedItem = $(element.controls+"_c");

        if(expandedItem && collapsedItem)
        {
            if(expandedItem.style.display == "none")
            {
                Effect.SlideDown("expandedItem");
                Effect.SlideUp("expandedItem");
                this.saveCollapsed(element.controls);
            }
            else
            {
                Effect.SlideUp("expandedItem");
                Effect.SlideDown("expandedItem")
                this.saveCollapsed(element.controls, 1);
            }
        }
        else if(expandedItem && !collapsedItem)
        {
            if(expandedItem.style.display == "none")
            {
                Effect.SlideDown(expandedItem);
                element.src = element.src.replace("collapse_collapsed.gif", "collapse.gif");
                element.alt = "[-]";
                element.title = "[-]";
                this.saveCollapsed(element.controls);
            }
            else
            {
                Effect.SlideUp(expandedItem);
                element.src = element.src.replace("collapse.gif", "collapse_collapsed.gif");
                element.alt = "[+]";
                element.title = "[+]";
                this.saveCollapsed(element.controls, 1);
            }
        }
        return true;
    },

Następnie w szablonie headerinclude dodać:

<script type="text/javascript" src="jscripts/prototype.js?ver=1600"></script>
<script type="text/javascript" src="jscripts/scriptaculous.js?ver=1600"></script>
<script type="text/javascript" src="jscripts/general.js?ver=1600"></script>

I gotowe.
Sprawdzałem na Firefox 3.6, Firefox 4 i Internet Explorer 9.
IE - działa w kit, dziwny efekt.
FF 4.0 - nie działa, standardowo dział znika.
FF 3.6 - działa i to perfekcyjnie.

Na operze nie działa a na IE dynamicznie nie rozwija.
btw. wystarczy dodac

<script type="text/javascript" src="jscripts/scriptaculous.js?ver=1600"></script>

bo protek i general jest w standardzie...

@edit
Na IE nie robi ciastka i jest nieco bezużyteczne.