Expandable list with JavaScript in Joomla 2.5

Question

I inherited a Joomla 2.5 university site.

There is a page with the university structure that looks like a tree. When the user clicks on one of the items, that item expands and everything else collapses. After a few click you may get this:

• Academic structure
  • Rectorate
    • Rector
    • Vice-Rector of X
    • Vice-Rector of Y
      • John Doe
        • phone
        • mail
    • Vice-Rector of Z
  • Departments
  • Programs
• Administrative structure
• Governance structure

The people who worked on the site made 65 different articles for every possible expansion of the tree. Impossible to maintain auto-generated HTML, zero consistency, every page is misaligned beyond repair.

I will remove all the articles and make one page with an expandable tree. I already made a JSON of the structure and it's less than 1 MB (with the photos) so I will just load it collapsed.

I want people to just edit the JSON and not the article code itself. Therefore I need a script that will apply the correct formatting to different JSON trees. For example, all 'person' nodes should be styled the same way.

How do I enable JavaScript expandable tree in Joomla 2.5? I only have access to the Joomla admin panel, not the server itself. There's an option in the editor to enable tags, will that be enough? Are there any gotchas if I just insert some JavaScript into the Joomla article?

What should I use for the project? I was thinking of jQuery with jsTree.

Answer 1

From Joomla configuration you can disable the standard WYSIWYG editor and insert "raw" HTML - including JS - in any content article, but you will still have issues because by default the content views escape most of the JS content.

I suggest a different way instead.

1. Develop a new Joomla module where you put all your custom HTML and JS. You can duplicate and adapt the "mod_custom" module type, or you can follow this tutorial.

2. Create an instance of this module from Joomla admin panel (Modules -> New -> YourModuleType) and assign it to a fake position (i.e. "tree").

3. Load the module into your article by writing {loadposition tree} in the article content. More about loadposition.

Et voilà! :-)

I suggest to use a module because it's simpler for you to edit it as a developer than a Joomla article; and I suggest to still use an article as container because it's easier to link a menu item to it and deal with URL / metadata / etc...