ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Help! Code needed for creating a Expandable/Collapsible list

May 14, 2012 1:25pm

Subscribe [2]
  • #1 / May 14, 2012 1:25pm

    squaresoftvii

    1 posts

    Good afternoon!

    Forgive me for an extremely newbie question, but I’m currently looking for input as to how you would go about creating an expandable/collapsible list in the EE design interface. It has been a very long time since I’ve worked with html, and so far all the code examples I found on the net have not been working since I do not have access to the html header section.

    Basically what I want to do is make it so that you can expand a department name on our website to list its head faculty along with its contact info:

    [+]Department
          Faculty Name
          Address
          Phone number

    This seems pretty simple, so I was just wondering if anyone here would know how to do this. Please let me know what you think!

  • #2 / May 14, 2012 5:52pm

    John St-Amand

    865 posts

    I think in order to achieve what you’re looking for, you’re going to need to be able to call the jQuery library into your template.  This doesn’t have to be done in the head of the document, however, and can be done just before the </body> tag at the bottom of your document (this way, the rest of the page content loads before the jQuery library is called and applied.

    So if you have the ability to access your template structure, you should be able to get a variety of jQuery-based open/close functions to work - you just need to locate the one that functionally performs the way you’re looking for it to perform for the user.  As a starting point, you could build it statically and then worry about EE integration after you have it working. One example I rather like is Chris Coyier’s simple accordion which I have used for menus before.

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases