How to open multiple Accordion tabs in react-bootstrap?

Question

I am trying to open multiple Accordion if possible. Currently using react-bootstrap library.

Following is my implementation :


  {data.rows.map((item, index) => {
    return (
      
        
          
            
              
                {item.title}
              
            
            
              {" "}
              
                +
              
            
          
        
        
          
            {item.content}
          
        
      
    );
  })}{" "}


...


function ContextAwareToggle({ children, eventKey, callback }) {
  const currentEventKey = useContext(Fifth);

  const decoratedOnClick = useAccordionToggle(
    eventKey,
    () => callback && callback(eventKey)
  );

  const isCurrentEventKey = currentEventKey === eventKey;
  console.log(currentEventKey);
  return (
    
  );
}

Following is the link where I got my reference of code: https://react-bootstrap.github.io/components/accordion/

Also, if not accordion then please suggest any other component. Been trying to create a FAQ template in my project.

Thanks

user_2924393 · Answer

The Accordion component is designed to expand one card at once. To achieve the effect of multiple tabs opened, you need to use multiple Accordions like this:

import React from "react";
import { Accordion, Card, Button } from "react-bootstrap";

const tabs = [
  { id: 1, label: "Tab 1", description: "Content of Tab 1" },
  { id: 2, label: "Tab 2", description: "Content of Tab 2" },
  { id: 3, label: "Tab 3", description: "Content of Tab 3" }
];

export default function App() {
  return (
    
      {tabs.map(tab => (
        
          
            
              
                {tab.label}
              
            
            
              {tab.description}
            
          
        
      ))}
    
  );
}

Here is a code sandbox https://codesandbox.io/s/react-bootstrap-multiple-accordion-tabs-oboks

user_6389337 · Answer

I was also facing the similar issue in my application. Due to inherent nature of accordion it is not possible to keep previous tab open while opening other tab. Finally I created multiple accordion for each individual tab using a loop as below.

import React, { Component } from "react";
import { Accordion, Card, Button } from 'react-bootstrap';

class ItemsList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const items = this.props.itemList;
        return (
            {items.map((item) => {
                return (
                    
                        
                            
                                
                                
                                {item.itemName}
                            
                            
                                
                                    {item.itemDescription}
                                
                            
                        
                    
                );
            })}
        );
    }
    export default ItemsList;

It works perfectly fine and I am able to achieve behaviour of keeping two or more tabs open at the same time which is not possible using a single Accordion. Hope this helps.

user_7841823 · Answer

UPDATE:

It is now possible to keep accordion tabs open when opening another tab. This can be achieved using the alwaysOpen property:

Documentation here

user_13859481 · Answer

i had this problem aswell, i solved it by using reactstrap library's UncontrolledAccordion

here is an example:

// ** Reactstrap Imports
import {
  UncontrolledAccordion,
  AccordionBody,
  AccordionHeader,
  AccordionItem,
  Label
} from "reactstrap";

// ** Example Component layout in the render() function

  ACCORDION MENU
  
    Test 1
    
        
          Test 1
        
    
  
  
    Test 2
    
        
          Test 2
        
    
  
  
    Test 3
    
        
          Test 3

Note: you cannot control the state of the accordion items with an accordion like this, the user either needs to refresh the page or close the accordion items themselves.

user_1677380 · Answer

I achieved this by using a for loop on getElementsByClassName. Don't forget to bind this in the constructor of your component or it will not work.

constructor(props) {
    super(props)
    this.showAllAccordionTabs = this.showAllAccordionTabs.bind(this)
  }

  showAllAccordionTabs() {
    const getCollapsedAccordionSections = document.getElementsByClassName(
      "collapse"
    )
    for (var i = 0; i < getCollapsedAccordionSections.length; i++) {
      getCollapsedAccordionSections[i].classList.add("show")
    }
  }

Then add the onClick event

onClick={this.showAllAccordionTabs}

How to open multiple Accordion tabs in react-bootstrap?

5 Answers