jsTree show/hide nodes

Question

I'm working with jstree and I would like to know how to hide/show nodes if possible. I gave the list items a "cat" id to select them with jquery but this doesn't work.

Here's the code.

html:

<div class="resultsContent">

    <div class="demo" id="demo_1">

    <ul>

    {% for ipc in ipcs %}

        {% ifequal ipc.back_list 1 %}   

            </ul></li>

        {% endifequal %}    

        {% ifequal ipc.kind "c" %}  

        <li id="{{ ipc.symbol }} cat" rel="node-type">
                {% else %}
                    <li id="{{ ipc.symbol }} cat" rel="node-type">
            {% endifequal %}
    {% endfor %}
    </ul>

</div>

</div>

script:

jQuery('#demo_1')

    .jstree({

        plugins : [ "themes", "html_data", "checkbox"  ], 

        themes : { theme: "default", dots : false, icons : false },         

        core : { "initially_open" : [ "{{ top_symbol }}" ] }, 

    })

$("#cat").slice(5, 10).hide(); //Hide some nodes

Tomas Narros · Accepted Answer · 2010-09-14T13:51:33.340

3

It seems at your code that you are generating li elements with an ID composed by a IPC Symbol value plus a black space, plus the word "cat".

<li id="{{ ipc.symbol }} cat" rel="node-type">

But, your selector is trying to get an element whose ID is exactly "cat"

$("#cat").slice(5, 10).hide(); //Hide some nodes

Maybe you could use a different jQuery selector. By the example, Attribute Contains Selector:

$("li[id*='cat']").slice(5, 10).hide(); //Hide nodes with the string 'cat'

Or the Attribute Contains Word Selector, more appropriate in this case (because you are looking for a whole word):

$("li[id~='cat']").slice(5, 10).hide(); //Hide nodes containing the word 'cat'

edited Sep 14 '10 at 13:51

answered Sep 14 '10 at 13:45

Tomas Narros

13,390
2
40
56

Thanks Tomás, I tried that but it seems putting the "cat" in the id conflicts with jstree. I'll have to put select the li elements in other way. – mxm Sep 14 '10 at 14:16
In that case, try with the Child Selector (http://api.jquery.com/child-selector/): select all the LI items under "demo_1" DIV: $('#demo_1 > li') – Tomas Narros Sep 14 '10 at 14:25
I have posted a [question](https://stackoverflow.com/questions/62632209/show-hide-kartik-treeview-nodes) related to it can you please see it? – Moeez Jun 29 '20 at 06:31

jsTree show/hide nodes

1 Answers1

Linked