Search results

Create collapsible Tabs

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.
Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { enableRipple, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
enableRipple(true);
export default class App extends React.Component {
    constructor() {
        super();
        this.prevIndex = 0;
        this.updateCollapseClass = this.updateCollapseClass.bind(this);
    }
    updateCollapseClass(index) {
        // Custom classes are added/removed from tab content and active line element, when the same tab item again clicked
        this.actLine = document.querySelector('.e-indicator');
        let cntEle = document.getElementById("e-content_" + index);
        if (this.prevIndex !== index || isNOU(cntEle)) {
            return;
        }
        if (cntEle.classList.contains('collapse')) {
            cntEle.classList.remove('collapse');
            this.actLine.classList.remove('collapse');
        }
        else {
            cntEle.classList.add('collapse');
            this.actLine.classList.add('collapse');
        }
        this.prevIndex = index;
    }
    tabCreated() {
        // After tab created first tab content and active line are hidden by adding custom class
        this.actLine = document.querySelector('.e-indicator');
        document.getElementById("e-content_0").classList.add('collapse');
        this.actLine.classList.add('collapse');
    }
    tabSelected(e) {
        // If next tab item selected custom class is removed from content and active line element
        let cnttrgs = document.querySelectorAll('#element.e-tab > .e-content > .e-item');
        for (let i = 0; i < cnttrgs.length; i++) {
            cnttrgs[i].classList.remove('collapse');
        }
        if (this.actLine !== undefined) {
            this.actLine.classList.remove('collapse');
        }
        this.trgIndex = e.selectedIndex;
        this.prevIndex = e.selectedIndex;
    }
    componentDidMount() {
        // Custom click event binding for each tab item to make collapse/expand
        document.getElementById('e-item_0').addEventListener('click', () => this.updateCollapseClass(0));
        document.getElementById('e-item_1').addEventListener('click', () => this.updateCollapseClass(1));
        document.getElementById('e-item_2').addEventListener('click', () => this.updateCollapseClass(2));
    }
    render() {
        let headertext;
        headertext = [{ text: "Twitter" }, { text: "Facebook" }, { text: "WhatsApp" }];
        return (<TabComponent heightAdjustMode='Auto' className="e-background" id='element' ref={tab => this.tabInstance = tab} created={this.tabCreated} selected={this.tabSelected.bind(this)}>
        <TabItemsDirective>
          <TabItemDirective header={headertext[0]} 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.'}/>
          <TabItemDirective header={headertext[1]} 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.'}/>
          <TabItemDirective header={headertext[2]} 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.'}/>
        </TabItemsDirective>
      </TabComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective, selectEventArgs } from '@syncfusion/ej2-react-navigations';
import { enableRipple, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';

enableRipple(true);

export default class App extends React.Component<{}, {}> {
  public tabInstance:TabComponent;
  public prevIndex: number = 0;
  public trgIndex: number;
  public actLine: HTMLElement;

  constructor() {
    super();
    this.updateCollapseClass = this.updateCollapseClass.bind(this);
  }

  public updateCollapseClass(index: number): void {
    // Custom classes are added/removed from tab content and active line element, when the same tab item again clicked
    this.actLine = document.querySelector('.e-indicator');
    let cntEle: HTMLElement = document.getElementById("e-content_" + index);
    if (this.prevIndex !== index || isNOU(cntEle)) { return; }
    if (cntEle.classList.contains('collapse')) {
      cntEle.classList.remove('collapse');
      this.actLine.classList.remove('collapse');
    } else {
      cntEle.classList.add('collapse');
      this.actLine.classList.add('collapse');
    }
    this.prevIndex = index;
  }

  public tabCreated(): void {
    // After tab created first tab content and active line are hidden by adding custom class
    this.actLine = document.querySelector('.e-indicator');
    document.getElementById("e-content_0").classList.add('collapse');
    this.actLine.classList.add('collapse');
  }

  public 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 (this.actLine !== undefined) { this.actLine.classList.remove('collapse'); }
    this.trgIndex = e.selectedIndex;
    this.prevIndex = e.selectedIndex;
  }

  componentDidMount() {
    // Custom click event binding for each tab item to make collapse/expand
    document.getElementById('e-item_0').addEventListener('click', () => this.updateCollapseClass(0));
    document.getElementById('e-item_1').addEventListener('click', () => this.updateCollapseClass(1));
    document.getElementById('e-item_2').addEventListener('click', () => this.updateCollapseClass(2));
  }

  render() {
    let headertext: any;
    headertext = [{ text: "Twitter"}, { text: "Facebook"}, { text: "WhatsApp"}];

    return (
      <TabComponent heightAdjustMode='Auto' className="e-background" id='element' ref={tab => this.tabInstance = tab} created={this.tabCreated}  selected= {this.tabSelected.bind(this)}>
        <TabItemsDirective>
          <TabItemDirective header= { headertext[0] }
            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.' } />
          <TabItemDirective header= { headertext[1] }
            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.' } />
          <TabItemDirective header= { headertext[2] }
            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.' } />
        </TabItemsDirective>
      </TabComponent>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
     <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
    <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'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>