Monday, October 10, 2016

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.


Accordion_00

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.

Accordion_01

This is where you would place this code:


Accordion_02

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'..


Accordion_03

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.


Accordion_04

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.


Accordion_05

With the above, the DESIGN page looks like this:


Accordion_06

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.


Accordion_07

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


       

   
Post a Comment