Cześć!

Borykam się z problemem związanym z JavaScriptem - a raczej z brakiem szerszej wiedzy w tym zakresie.

Robię na Wordpressie stronę, która będzie miała dużo kategorii, subkategorii i subsubkategorii.

Aby to wszystko filtrować ściągnąłem wtyczkę Filter & Search, gdzie można za pomocą checkbox'ow wybierać kategorie wpisów.

Wszystkie kategorie i ich subkategorie są domyślnie rozwinięte co zajmuje dużo miejsca na stronie.

Potrzebuję JavaScriptu który to wszystko schowa, i zostawi tylko główne kategorie, a resztę pokaże po kliknięciu.

W HTMLu wygląda to tak:

<aside id="sidebar" class="sidebar">
    <div class="sidebar-content">
        <section id="text-3" class="widget widget_text">
            <div class="widget-title">Przykład nr 2</div>
            <div class="textwidget">
                <form data-sf-form-id="1006205" data-is-rtl="0" data-maintain-state="" data-results-url="https://ducatus.org/" data-ajax-url="https://ducatus.org/?sf_data=results" data-ajax-form-url="https://ducatus.org/?sfid=1006205&sf_action=get_data&sf_data=form" data-display-result-method="post_type_archive" data-use-history-api="1" data-template-loaded="0" data-taxonomy-archives="1" data-lang-code="" data-ajax="1" data-ajax-data-type="html" data-ajax-target="#main" data-ajax-pagination-type="infinite_scroll" data-show-scroll-loader="1" data-infinite-scroll-trigger="-100" data-ajax-links-selector=".pagination a" data-update-ajax-url="1" data-only-results-ajax="1" data-scroll-to-pos="0" data-init-paged="1" data-auto-update="1" action="https://ducatus.org/" method="post" class="searchandfilter" id="search-filter-form-1006205" autocomplete="off" data-instance-count="1">
                    <ul>
                        <li class="sf-field-category" data-sf-field-name="_sft_category" data-sf-field-type="category" data-sf-field-input-type="checkbox" data-sf-term-rewrite="["https:\/\/ducatus.org\/category\/[0]\/","https:\/\/ducatus.org\/category\/[0]\/[1]\/","https:\/\/ducatus.org\/category\/[0]\/[1]\/[2]\/","https:\/\/ducatus.org\/category\/[0]\/[1]\/[2]\/[3]\/"]">
                            <ul id="MainMenu" data-operator="and" class="">

                                <li class="sf-level-0 sf-item-1" data-sf-count="0" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="bez-kategorii" name="_sft_category[]" id="sf-input-34a414f743dd370f2e1f1938d6493244"><label class="sf-label-checkbox" for="sf-input-34a414f743dd370f2e1f1938d6493244">Bez kategorii</label></li>
                                <li class="sf-level-0 sf-item-47" data-sf-count="1" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="timeline" name="_sft_category[]" id="sf-input-7aba07c8d1fbb2346833e4ca738ccf52"><label class="sf-label-checkbox" for="sf-input-7aba07c8d1fbb2346833e4ca738ccf52">Timeline</label>
                                    <ul class="children">
                                        <li class="sf-level-1 sf-item-48" data-sf-count="3" data-sf-depth="1"><input class="sf-input-checkbox" type="checkbox" value="prehistory-and-antique" name="_sft_category[]" id="sf-input-84fc4badfee71fdd0a249930c75e60f6"><label class="sf-label-checkbox" for="sf-input-84fc4badfee71fdd0a249930c75e60f6">Prehistory and antique</label>
                                            <ul class="children">
                                                <li class="sf-level-2 sf-item-49" data-sf-count="2" data-sf-depth="2"><input class="sf-input-checkbox" type="checkbox" value="prehistory" name="_sft_category[]" id="sf-input-ff5ee06faa29bb2ae69f766371bbaa93"><label class="sf-label-checkbox" for="sf-input-ff5ee06faa29bb2ae69f766371bbaa93">Prehistory</label></li>
                                                <li class="sf-level-2 sf-item-50" data-sf-count="1" data-sf-depth="2"><input class="sf-input-checkbox" type="checkbox" value="bronze-age" name="_sft_category[]" id="sf-input-1760d2e76ed15d69194d585bb06f8f4e"><label class="sf-label-checkbox" for="sf-input-1760d2e76ed15d69194d585bb06f8f4e">Bronze age</label></li>
                                            </ul>
                                    </ul>
                                    </li>
                            </ul>
                            </li>
                    </ul>
                </form>
            </div>
        </section>
    </div>
</aside>

Timeline to kategoria główna, Prehistory and antique to podkategoria Timeline, a Prehistory to podkategoria Prehistory and antique. A więc tak:

  1. Timeline
    1.1. Prehistory and antique
    1.1.1.Prehistory
    1.1.2. Bronze Age

Potrzebuję to wszystko schować, do głównej kategorii Timeline.

Zrobiłem coś takiego


$('#MainMenu').find('> li').click(function() {
    $('#MainMenu > li').not(this).find('ul').slideUp();
    $(this).find('ul').stop(true, true).slideToggle(400);
    return false;
});

Ale niestety jak kliknę w Bronze Age to chowa mi wszystko
Ktoś ma jakieś rozwiązanie? Będę wdzięczny a nawet zapłacę!

Dzięki!
/////////////
Dodałem w Javie, a powinno być w JavaScript. Jak można przenieść to będę wdzięczny