Živá ukázka

Výsledek

<ul>
    <li onClick="text(this)">
        <strong>otazka1</strong>
        <ul class="hidden">
            <li onClick="text(this)">
                <strong>otazka1.1</strong>
                <div class="hidden">Odpoved 1.1</div>
            </li>

<li onClick="text(this)">
                <strong>otazka1.2</strong>
                <ul class="hidden">
                    <li onClick="text(this)">
                        <strong>otazka1.2.1</strong>
                        <div class="hidden">Odpoved 1.2.1</div>
                    </li>

<li onClick="text(this)">
                        <strong>otazka1.2.2</strong>
                        <div class="hidden">Odpoved 1.2.2</div>
                    </li>

<li onClick="text(this)">
                        <strong>otazka1.2.3</strong>
                        <div class="hidden">Odpoved 1.2.3</div>
                    </li>
                </ul>
            </li>

<li onClick="text(this)">
                <strong>otazka1.3</strong>
                <div class="hidden">Odpoved 1.3</div>
            </li>
        </ul>
    </li>
    
    <li onClick="text(this)">
        <strong>otazka2</strong>
        <ul class="hidden">
            <li onClick="text(this)">
                <strong>otazka2.1</strong>
                <div class="hidden">Odpoved 2.1</div>
            </li>

<li onClick="text(this)">
                <strong>otazka2.2</strong>
                <div class="hidden">Odpoved 2.2</div>
            </li>

<li onClick="text(this)">
                <strong>otazka2.3</strong>
                <div class="hidden">Odpoved 2.3</div>
            </li>
        </ul>
    </li>
</ul>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

function text(element, event){
    if (!event)
        event = window.event;

if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
    
    
    if (isVisible(element.children[1])) {
        hideTree(element.children[1]);
    } else {
        showElement(element.children[1]);
        
        var children = element.parentNode.children
        
        for (var i = 0; i < children.length; i++) {
            if(children[i] != element && isVisible(children[i].children[1])) {
                hideTree(children[i].children[1])
            }
        }
    }
}

function hideTree(element) {
    hideElement(element)
    
    var children = element.children
    for (var i = 0; i < children.length; i++) {
        if(isVisible(children[i].children[1])) {
            hideTree(children[i].children[1])
        }
    }
}

function showElement(element) {
    element.className = element.className.replace(/(?:^|\s)hidden(?!\S)/g, '')
}

function hideElement(element) {
    element.className += ' hidden'
}

function isVisible(element) {
    return element.className.match(/(?:^|\s)hidden(?!\S)/) === null
}

JS

Autoformát
jQuery
Umístění JS