rozwijana lista (jak w phpmyadmin)

Question

Czy wie ktoś jak zrobić taką rozwijaną listę jak ta na obrazku po lewej? Najlepiej przy użyciu Bootstrap, chociaż nie wiem czy posiada on taką opcję. Mógł bym to zrobić przy użyciu zakładek, ale zastanawiam się czy jest lepsza opcja.

Answer 1

Łatwe do zaklepania w czystym JS. Wszystko opierałoby się na listach. Ostatecznie sprowadziłbym to do tego żeby sprawdzać czy element "rodzic" ma w sobie kolejną listę i wtedy po kliknięciu na niego zwijać ją/rozwijać. Pozostaje tylko kwestia zrobienia animacji i trochę ostylowania w CSS (ukrycie domyślnie wszystkich dzieci żeby startowo lista była zwinięta, zastosowanie wcięć itd.).

Comments

+ ARIA do odzwierciedlania stanu list (głównie [aria-expanded])

---

no niby można, w sumie animacje to nawet bym sobie odpuścił, no ale poczekam jeszcze, może ktoś jeszcze się odezwie.

Answer 2

https://codepen.io/zgrybus/pen/oeZpWg

Comments

hmmm... mi nie działa to w ogóle. Albo po prostu nie wiem jak tego użyć xD

---

klikasz na 1 lub 6 i Ci się lista rozwija

---

chodzi mi o to jak to wsadzić w stronę xD

---

No to w tym Ci nie pomogę. Jak nie umiesz tego wsadzić na stronę? :P

---

chodzi o kod js. Wsadzać go w head, dół strony czy gdzie? bo jak wstawiałem to nie działało. W konsoli komunikatów też nie było.

---

a gdzie wstawiłeś? Dodałeś te same klasy do listy?

---

Wszystko przekopiowałem bez zmian. JS wkleiłem w head

---

w znacznik <script> ?

---

jest :)

w sumie już poradziłem sobie i sam napisałem prosty skrypt w js i działa bez problemu. Jakby ktoś był ciekawy to podaje kod:

function menutab(id)
    {
        
        var tab=document.getElementById(id).className;
        
        if(tab==="menu-tab")
        {
            open=false;
        }
        else
        {
            open=true;
        }
        
        if(open===true)
        {
            document.getElementById(id).className="menu-tab";
        }
        else
        {
            document.getElementById(id).className="menu-tab-active";
        }
    }