it would be helpful to have accordian style ui elements. currently I mock them up using rectangles, but having a already build element would be easier.

14 answers

We may add this element soon. Will you be willing to share with us your customized accordian element (which is made with rectangles)? We’d like to get some inspire from your design 🙂

If you’d like you can send your design to, thanks in advance.



thanks for responding. I emailed you a mockup of what I used in my project.



Thanks Jeff, we’ve got your mockup, that’s great!


Is it possible for me to recieve this mockup? I need an accordian element really bad.

  1. Hi Audrey, we could not provide Jeff's file without his permission.

    However we have plan to provide new accordian element, which can work as container (just like Tabs).

Hey Xavier, do you know when you all plan to come out with this element? Also, is there a way I could simulate this now by using a different element?

  1. Hi Audrey, the schedule is not finalized yet. However you can simulate it with buttons and rectangles, just like what Jeff did.
  2. Ok, now I can confirm that the new Accordian element will be included in the next update :-)

GREAT! That is very exciting. Do you all know when you plan to put out the next update?

  1. It should be available next week :-)
  2. GREAT!

Awesomely good timing as I decided I needed one today.
My long term wish list includes:
* Support for icon in section title – choice of left or right side
* Font control for section title vs content text (it would be nice if the Text label control support mixed styles e.g. Bold textNormal text – I’ll make a separate post.

This is what I want to replicate


Tim, that is exactly what I am looking for too!


The accordion element is available in V2.70


AWESOME! Looks great, unfortunately 2.70 is broken though – I am unable to drag anything from the toolbox onto the plot!

Downloaded 2.70 from the Download page as the auto-updater is reporting an error.

Windows 7 x64

  1. It is only when trying to drag from Toolbox or Image Dock - nothing happens. Double clicking works fine to create new element, and left drag works fine on plot area
  2. Thanks for the reporting. The auto update package is fixed now :-)

Hey, it’s really cool – great new Element, works just as desired, well done.

Feature request already – events for Open and Close of Sections.

  1. "Section Expanded/Collapsed" event is available from V2.72 :-)

Thanks, it works just as I expected it too. The only thing is that I can only view it in wireframe mode. When I try to apply the Windows 7 look and feel it does not change. Was this done on purpose?

  1. Yes it is intended. Since Accordion is not a standard control in Windows, we are not sure how it should look like in Windows theme, so we just put it in the "Basic" category and let users to customize its appearance.

That’s what I thought. Thank you!


So is it possible now to have a customized accordion? I want to use the expand collapse like mentioned in this thread but I am not if I saw the ability to change the design of the accordion on the left panel with all the basic components. am I missing where I can make a customized accordion from? Also is it possible to have a accordion which enables you to expand multiple entries at a time? Thanks

  1. Sure, you can find the Accordion element in the list. Make sure you have updated ForeUI to the latest version.

    You can custom the look of Accordion element by tweaking its parameters in the floating tool pane. Here is an example: <a href="; rel="nofollow"></a&gt;

    The Accordion element can be used as container, which allows you to embed multiple elements into its section, and show/hide them when switching the section. You can try this: select multiple elements and RIGHT drag them into the Accordion element. If your mouse does not have right button, you can use Ctrl+Drag to get the same result.
  2. hey Xavier, I like this. However I am probably looking for a mix of accordion and simple expand collapse. I like the list sliding I get with this accordion but I would prefer to have a triangle on left which is for expansion of the list and collapse. I do need the multiple expansion at the same time like in the accordion above, but I don't need following things
    1. The icons on the left
    2. The surrounding box which is basically transparent.
    3. Instead of expand collapse being on the right( arrows) I want triangle shape on the left for every header section which changes the angle of upon expansion or collapse( hopefully no extra pages have to be added:))

    I saw the basic widgets on left with the tree expand collapse but the problem is I am not looking for any checkboxes on left side of my individual elements, rather I am having toggle switch for check and cross.
  3. The Accordion element is quite flexible:
    You can specify two different images as the icons for expanded/collapsed sections (i.g. two triangle icons with different angles).
    You can decide where the icon will be placed (left or right).
    You can change the background color and its opacity (default is 0, which is transparent).

    I believe you can achieve what you need by changing the paramters of Accordion.
  4. Thanks in this accordion. How can I have multiple headings within a accordion to have expanded at the by default when the user comes in to a screen. I am coming to this screen with this customized accordion but everything is in collapsed mode when I come in. Any way out? Thanks

    Should I just start new thread for my questions or is it okay to keep posting accordion related questions here? Thanks
  5. Hi varun, this can be achieved by defining an action in the Page Loaded event handler.

    It is better to open a new thread to discuss that question.

This question is now closed