Jump to:

23545 Posts in 19310 Topics by 2888 members

General Questions

SilverStripe Forums » General Questions » Accordion function

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1717 Views
  • markit
    Avatar
    Community Member
    3 Posts

    Accordion function Link to this post

    We would like to use an accordion function in a SilverStripe website similar to http://www.lifeway.ac.nz/3d-animation/, but are not sure how this would be set up to allow editing in the CMS. Has this been done before or are there any ideas?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Accordion function Link to this post

    An accordion can be realized with just templates, css and javascript. As for the CMS: You could simply create sub-pages for each of the accordion panes. Then output it in your template like so:

    <% if Children %>
    <div class="accordion">
       <% control Children %>
       <div>
          <h2 class="accordion-header">$Title</h2>
          $Content
       </div>
       <% end_control %>
    <div>
    <% end_if %>

    That would output the contents of all child-pages of the current page. Then it's just a matter of applying CSS and JavaScript for a fully working accordion.

    Edit: if there are only small amounts of content in the accordion tabs, you could also use something like a has_many relation or even enter the required code inside the editor. There are quite a lot of possible solutions.. it's all a matter of taste.
    On a second thought, the has_many relation is probably even better than my first solution, since it won't actually require a page for each accordion pane (therefore not polluting the url names)

  • markit
    Avatar
    Community Member
    3 Posts

    Re: Accordion function Link to this post

    Thank you, brilliant

    1717 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.