{% macro renderAccordionMenu(j3, item) %}
  {% import _self as self %}
  <li class="{{ j3.classes(item.classes) | replace({'dropdown': ''}) }}">
    {% set id = j3.uniqueId('collapse-') %}
    {% if item.link.href %}
      <a href="{{ item.link.href }}" {{ j3.linkAttrs(item.link) }}>
        {{ j3.countBadge(item.title, item.link.total, item.link.classes) }}
        {% if item.items %}
          {% if item.isOpen %}
            <span class="open-menu" data-toggle="collapse" data-target="#{{ id }}" aria-expanded="true" role="heading"><i class="fa fa-plus"></i></span>
          {% else %}
            <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ id }}" role="heading"><i class="fa fa-plus"></i></span>
          {% endif %}
        {% endif %}
      </a>
    {% else %}
      <a>
        {{ j3.countBadge(item.title, item.link.total, item.link.classes) }}
        {% if item.items %}
          {% if item.isOpen %}
            <span class="open-menu" data-toggle="collapse" data-target="#{{ id }}" aria-expanded="true" role="heading"><i class="fa fa-plus"></i></span>
          {% else %}
            <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ id }}" role="heading"><i class="fa fa-plus"></i></span>
          {% endif %}
        {% endif %}
      </a>
    {% endif %}
    {% if item.items %}
      <div class="collapse {% if item.isOpen %}in{% endif %}" id="{{ id }}">
        <ul class="j-menu">
          {% for subitem in item.items %}
            {{ self.renderAccordionMenu(j3, subitem) }}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </li>
{% endmacro %}
{% import _self as self %}
<div class="{{ j3.classes(classes) }}">
  {% if title %}
    <h3 class="title module-title">{{ title }}</h3>
  {% endif %}
  <ul class="j-menu">
    {% for item in items %}
      {{ self.renderAccordionMenu(j3, item) }}
    {% endfor %}
  </ul>
</div>
