1

I'm trying to display a list of object Models (Robots), the models have a field Parent which can be another Robot.

I've implemented a nested list using MPTT for Django:

{% load mptt_tags %}
<ul>
    {% recursetree nodes %}
        <li>
            <a href="{{ node.get_absolute_url }}">{{ node.name }}</a>
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>
            {% endif %}

        </li>
    {% endrecursetree %}
</ul>

I'd now like to make the list exandable/collapsable - eg I can shrink all nodes children. I'm having trouble using Javascript for this because the nodes are all of the same class. Is there any other simple way of implementing this?

Dawson
  • 457
  • 2
  • 9
  • 21
  • hmm, apply the collapsing to all ul elements with class "children"? should do the trick or am I missing something? you'll end up with a list of top level node names and collapsed children respectively – Martin B. Oct 13 '14 at 09:30
  • The collapse will then apply to all children elements in the list, not just the children of the parent node I wish to collapse. – Dawson Oct 14 '14 at 00:47

1 Answers1

2

you can figure out what level you're at in the tree using node.level, so all you need is add an additional CSS class to just the top level, something like this:

<ul id="node-{{ node.pk }}" class="children{% if node.level==0 %} top_level{% endif %}">

node.tree_id could also be interesting instead of just pk

Martin B.
  • 1,928
  • 12
  • 24
  • Actually I have the same issue when using this. The problem is that I want to collapse just one node. This will still collapse all because it doesnt distinguish them. – Dawson Oct 16 '14 at 01:19