How to nest the Accordion and Tile control inside the Navigation Drawer?

You can nest an ejAccordion or ejTile control into the Navigation Drawer by means of template feature.

Nesting Accordion control

The Navigation Drawer is always in the hidden state. You can display it while clicking the div element by setting the targetid property with the element’s id to the Navigation Drawer.

You can render the Accordion control inside the Navigation Drawer rendering element as in the following code example.

HTML

Now, when you click the target icon on the header, it opens the Navigation Drawer with Accordion control.

The following screenshot illustrates the output.

Figure 1: Navigation Drawer with Accordion control

Nesting Tile Control

The Navigation Drawer is always in the hidden state. You can display it while clicking the div element by setting the targetid property with the element’s id to the Navigation Drawer.

Refer to the following steps for nesting Tile control within Navigation Drawer.

First, create a Navigation Drawer with target element. To achieve this, refer to the following code example.

HTML

Next, as in the following code example, render the Tile controls inside the Navigation Drawer as a template.

HTML

Now, when you click the target icon on the header, it opens the Navigation Drawer with Tile controls.

The following screenshot illustrates the output.

Figure 2: Navigation Drawer with Tile controls