Rozwinięcie grup po kliknięciu

[Blacha988]

Witajcie, mam pytanie odnośnie tego, jak zrobić podobny efekt do podanego niżej:

http://prntscr.com/3or5xs

http://prntscr.com/3or614

 

Jest to na stronie cs-soplica.com, chciałbym taki sam efekt uzyskać na moim forum, proszę o pomoc

[DawPi]

http://community.invisionpower.com/files/file/4318-group-name-indicator/

[Blacha988]

Chodzi mi Dawpii o te pod grupy np. Counter-Strike 1.6, że jest to tak rozbite. 

[Macsch15]

Wydaje się że to autorskie rozwiązanie, ale bardzo proste do implementacji.

 

Przykład z czystym JS:

http://jsfiddle.net/L6H5T/

[Macsch15]

Automatyczna wiadomość

Temat przeniesiony z forum

Invision Power Board → Invision Power Board 3.4 → Modyfikacje - pomoc

do

Invision Power Board → Invision Power Board 3.4 → Style - pomoc

[Blacha988]

Mógłbyś mi pokazać jak wstawić takie coś u siebie na forum? Byłbym niezmiernie wdzięczny

[Macsch15]

Nie mogę Tobie odpowiedzieć dokładnie, bo nie korzystam z dodatku: http://community.invisionpower.com/files/file/4318-group-name-indicator/
 
Całość sprowadza się do wyszukania fragmentu odpowiedzialnego za wyświetlanie grup które dodaje to rozszerzenie a następnie dodanie do niego ręcznie grup które mają się pojawiać po kliknięciu.
Przykład:
 
W bicie globalTemplate, przed </head> dodajesz:

        <script>
            window.onload = function () {
                var element = document.getElementById('invisionize-test');
                var click = document.getElementById('click');

                click.onclick = function () {
                    if(element.style.display == 'block') {
                        element.style.display = 'none';
                    } else {
                        element.style.display = 'block';
                    }
                };
            };
        </script>

W głównym pliku CSS, ipb_styles.css dodajesz:

#invisionize-test {
    display: none;
}

I dodajesz obok grup wygenerowanych przez dodatek HTML z nowymi.

<ul>
    <li><a href="#" id="click"><span style="color:blue;font-weight: bold;">Nowa grupa</span></a></li>
</ul>

I w innym miejscu dodajesz elementy tego:

<div id="invisionize-test">
    <ul>
        <li><a href="link_do_grupy"><span style="color:blue;font-weight: bold;">Ukryta grupa</span></a></li>
        <li><a href="link_do_grupy"><span style="color:blue;font-weight: bold;">Ukryta grupa 2</span></a></li>
        <li><a href="link_do_grupy"><span style="color:blue;font-weight: bold;">Ukryta grupa 3</span></a></li>
        <li><a href="link_do_grupy"><span style="color:blue;font-weight: bold;">Ukryta grupa 4</span></a></li>
       <li><a href="link_do_grupy"><span style="color:blue;font-weight: bold;">Ukryta grupa 5</span></a></li>
    </ul>
</div>

[Blacha988]

Byłbym niezmiernie wdzięczny, jak ktoś by mi powiedział, jak to teraz zaimplementować w group name indentyfikator lub stworzyć coś na wzór legendy. 

Nie musi być to dodatek, a zwykły php.

[DawPi]

Przecież wszystko masz podane na tacy wyżej.

[Blacha988]

Ale nie wiem jak to dodać, żeby określić grupę w group name, bo jak dodaję do kodu, to nie dodaje do tych grup co są , tylko niżej, ponadto jakbym miał ustawić kolejność?