Create collapsible tabs in EJ2 TypeScript Tab control

2 May 202310 minutes to read

You can achieve collapse and expand functionality in Tab by adding/removing a custom CSS class in the click event handler for each tab.

  • Define a CSS class to set the style property display as none. Here ‘collapse’ class is added to the content element for hiding it using created event.
  • Bind the selected event for Tab to collapse the initially selected Tab item and bind custom click handler for the Tab headers.
  • In the event handler, add and remove ‘collapse’ class to hide and show the corresponding Tab content.
import { enableRipple } from '@syncfusion/ej2-base';
import { Tab, SelectEventArgs } from '@syncfusion/ej2-navigations';

enableRipple(true);

let trgIndex: number;
let actLine: HTMLElement;

let tabObj: Tab = new Tab({
    created: tabCreated,
    selected: tabSelected,
    items: [
        {
            header: { 'text': 'Twitter' },
            content: 'Twitter is an online social networking service that enables users to send and read short'
            + '140-character messages called "tweets". Registered users can read and post tweets, but those'
            + 'who are unregistered can only read them. Users access Twitter through the website interface,'
            + 'SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices'
            + 'around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone,'
            + 'and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,'
            + 'with more than 100 million users posting 340 million tweets a day in 2012.The service also'
            + 'handled 1.6 billion search queries per day.'
        },
        {
            header: { 'text': 'Facebook' },
            content: 'Facebook is an online social networking service headquartered in Menlo Park, California.'
            + 'Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College'
            + 'roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris'
            + 'Hughes.The founders had initially limited the website\'\s membership to Harvard students, but'
            + 'later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It'
            + 'gradually added support for students at various other universities and later to high-school'
            + 'students.'
        },
        {
            header: { 'text': 'WhatsApp' },
            content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for'
            + 'smartphones that operates under a subscription business model. It uses the Internet to send'
            + 'text messages, images, video, user location and audio media messages to other users using'
            + 'standard cellular mobile numbers. As of February 2016, WhatsApp had a user base of up to one'
            + 'billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in'
            + 'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for '
            + 'approximately US$19.3 billion.'
        }
    ]
});
//Render initialized Tab component
tabObj.appendTo('#element');

function tabCreated(): void {
    // After tab created first tab content and active line are hidden by adding custom class to make it collapse state
    actLine = document.querySelector('.e-indicator');
    document.getElementById('e-content-element_0').classList.add('collapse');
    actLine.classList.add('collapse');
}

function tabSelected(e: SelectEventArgs): void {
   // If next tab item selected custom class is removed from content and active line element
    let cnttrgs: HTMLElement[] = document.querySelectorAll('#element.e-tab > .e-content > .e-item');
    for (let i: number = 0; i < cnttrgs.length; i++) {
        cnttrgs[i].classList.remove('collapse');
    }
    if (actLine !== undefined) { actLine.classList.remove('collapse'); }
    this.trgIndex = e.selectedIndex;
     // Custom click event binding for each tab item to make collapse/expand
     e.selectedItem.onclick = (e : Event) => {
        updateCollapseClass(this.trgIndex);
    };
}

function updateCollapseClass(index: number): void {
    // Custom classes are added/removed from tab content and active line element, when the same tab item again clicked
    let cntEle: HTMLElement = document.getElementById('e-content-' + 'element_' + index);
    if (cntEle.classList.contains('collapse')) {
        cntEle.classList.remove('collapse');
        actLine.classList.remove('collapse');
    } else {
        cntEle.classList.add('collapse');
        actLine.classList.add('collapse');
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Tab" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-content .e-item {
            font-size: 12px;
            margin: 10px;
            text-align: justify;
        }

        .container {
            min-width: 350px;
            margin: 0 10px;
        }

        .info {
            margin: 10px;
            font-weight: bold;
        }

        .e-tab .e-content>.e-item.e-active.collapse {
            /* csslint allow: adjoining-classes */
            display: none;
        }

        .e-tab .e-tab-header .e-indicator.collapse {
            /* csslint allow: adjoining-classes */
            display: none;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="info">
            Collapsible Tabs
        </div>
        <span style="margin: 10px;">
            <i>The active tab can be toggled to expand and collapse its content.</i>
        </span>
        <br /><br />
        <div id='element' class="e-background"></div>
    </div>
</body>

</html>