RTL Support in JavaScript Accordion

19 Aug 20222 minutes to read

This feature supports to change the left-to-right alignment of the Accordion widget to right-to-left (RTL).

Enabling RTL Support

The following steps explains you in enabling the right-to-left i.e enableRTL property for an Accordion.

In an HTML page, define a div element that is a container for  Accordion widget and add the contents correspondingly

HTML

<div id="accordion" style="width: 500px">
    <h3>
        <a href="#">Orubase</a>
    </h3>
    <div>
        <!-- add accordion contents here to load contents under this header -->
        Orubase is the only mobile application development Framework built especially for developing complex line-of-business mobile applications targeting iOS, Android, and Windows Phone platforms in the shortest possible time frame.
    </div>
    <h3>
        <a href="#">WinRTXAML</a>
    </h3>
    <div>
        <!-- add accordion contents here to load contents under this header -->
        Essential Studio for WinRT contains all the controls you need to build line-of-business tablet applications including grid, chart, map, tree map, SSRS report viewer, rich-text editor, pdf viewer, gauges, barcode, editors, and much more. It also includes a unique set of controls for reading and writing Excel, Word, and PDF documents in Windows store apps.
    </div>
    <h3>
        <a href="#">Metro Studio</a>
    </h3>
    <div>
        <!-- add accordion contents here to load contents under this header -->
        Syncfusion Metro Studio is a collection of over 2500 Metro-style icon templates that can be easily customized to create thousands of unique Metro icons.
    </div>
</div>

JAVASCRIPT

// Enable RTL for accordion control
    $("#accordion").ejAccordion({
        enableRTL: true
    });

Output for accordion when “enableRTL” is set to “true” is as follows,