Intel XDK: Controls 13: ACCORDION Control in App Designer 7

In this post I will be considering the most basic implementation of the ACCORDION control in an Intel XDK App Framework 7 project.

I had described the accordion control  years ago while using the DOJO framework, another framework that worked splendidly.

You can create a project with an ACCORDION control on the web page.

You launch Intel XDK (Version3522) and create a Standard HTML5 project and choose to use the App Framework 7. This creates a single page application and the DESIGN features will be available.

I just placed a HEADER and replaced its title to My Books. The ACCORDION control is available under CONTROLS as shown.


For this post I tried dragging and dropping this control on to the page and it does not work, probably by design. What you need to do is to drop the following HTML fragment for this control on the page.


This is where you would place this code:


This will generate an accordion control with three accordion items, the second of which is displayed expanded in SIMULATION (very faint ellipsis at the left edge of displayed area below 'My Books'..


The first three ellipsis in the display belong to the three acordion items and the last ellipsis is what is shown in the fragment.

The second fragment is shown here and it shows a toggle and also the content it will toggle to.


Now I added some content to replace the ellipsis in the HTML fragment as shown. The changes are as shown. In the content area insert your content which may include images, etc.


With the above, the DESIGN page looks like this:


The displayed page appears as shown with the first item in Clicked state. You can click the other accordion items which will close the one that is open and opens the one that is clicked.


I apologize in inserting pictures of code instead of the code itself as the blogger does not support the 'pre' tags.


Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone