integrate-treeview-inside-the-accordion.md

layout	post
title	Integrate treeview in
description	Learn here all about Integrate treeview inside the accordion in Syncfusion
platform	ej2-javascript
control	Integrate treeview inside the accordion
publishingplatform
documentation	ug
domainurl

Integrate treeview inside the accordion in ##Platform_Name## Accordion control

Accordion supports to render other Essential JS 2 Components by using content property. You can give content as an element string like below, for initializing the component.

content: '<div id="element"> </div>'

The other component can be rendered with the use of provided events, such as clicked and expanding.

The following procedure is to render a TreeView within the Accordion,

• Import the TreeView module from ej2-navigations, for adding TreeView. Please refer the TreeView initialization steps

• You can initialize the TreeView component in expanding event, by getting the element and defining the required TreeView properties.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/accordion/accordion-treeview-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/accordion/accordion-treeview-cs1/index.html %} {% endhighlight %} {% highlight html tabtitle="datasource.ts" %} {% include code-snippet/accordion/accordion-treeview-cs1/datasource.ts %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/accordion/accordion-treeview-cs1" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/accordion/accordion-treeview-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/accordion/accordion-treeview-cs1/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/accordion/accordion-treeview-cs1" %} {% endif %}