Dynamic Menu jQuery

Hi there Tim,

Welcome to the support board! In general, the accordion was designed to handle static content, which covers 99% of use cases. Collapsible functionality is based on directly modifying elements' CSS properties, being evaluated on initial render only - with no way of having the accordion know whether something changed afterwards without going full async with the function. Please, include a snippet of your code for us to pinpoint the issue in the implementation and to know what your expectations are. If the will remains strong enough gathering some more people, the feature request would definitely get considered for a future release.

With Best Regards,
Kuba 

I think I have the solution to this finally after having struggled for more than a year on it.

The trick is to use their demo pages and steal the submenu, but then make a couple of key changes (apart from the "far" classes for the fa-icons).

I added the classes "submenu" and "collapsible" to the div. Then add the following code after the submenu is loaded through ajax:

<div class="collapsible-body submenu collapsible">
  <ul class="list-unstyled">
    <li><a href="#" class="waves-effect">FAQ</a></li>
    <li><a href="#" class="waves-effect">Contact</a></li>
    <li><a href="#" class="waves-effect">About</a></li>
    ... etc
  </ul>
</div>

--Javascript after ajax load of menu:
$(".submenu").collapsible();

I spoke too soon. Seemed to work fine as long as there was only one submenu in the whole sideNav. Now even with $(".submenu").each(function... I can't get the submenus to activate.

I'd really like more detailed information on this to figure out how to activate the menus.

Now I think I have it.

I removed the .submenu and simply called 

$(".collapsible").collapsible();

after the content was loaded.

Hopefully that will do the trick and be stable.

Hi @cdenby,

Thanks for input! It is so cool to see people experimenting with the library. :)

Yes, this is what I meant with the comment to my initial response - .collapsible() does CSS magic on element that must be there first for it to work. Simply calling the method at the end of data load callback should fix the issue.

I will turn to jQuery dev team to build upon existing docs to include what was said here.
Q: Which docs page you thing would be the best to include information about dynamically loaded content?

With Best Regards,
Kuba