<div class="accordion">
  <div class="accordion-panel">
    <h3 class="accordion-header">Panel 1</h3>
    <div class="accordion-body">These are the contents of panel 1</div>
  </div>
  <div class="accordion-panel accordion-expanded">
    <h3 class="accordion-header">Panel 2</h3>
    <div class="accordion-body">These are the contents of panel 2</div>
  </div>
  <div class="accordion-panel explode">
    <h3 class="accordion-header">Panel 3 (will explode)</h3>
    <div class="accordion-body">These are the contents of panel 3</div>
  </div>
</div>
.accordion-broken {
  background-color: red;
  pointer-events: none;
  opacity: 0.5;
}

.accordion-header {
  cursor: pointer;
}

.accordion-panel {
  border: 1px dashed black;
  margin: 2px;
  padding: 5px;
}

.accordion-panel > .accordion-body {
  display: none;
}

.accordion-panel.accordion-expanded > .accordion-body {
  display: block;
}
class ErrorBoundary extends React.Component {
  state = {
    accordionsBroken: false,
  };
  
  componentDidCatch(error, info) {
    // report error to your bug tracking software
    this.setState({
      accordionsBroken: true,
    })
  }

  componentDidUpdate() {
    const accordions = document.querySelectorAll(".accordion");
    for (const accordion of accordions) {
      accordion.classList.toggle(
        'accordion-broken',
        this.state.accordionsBroken,
      );
    }   
  }
  
  render() {
    return (
      this.state.accordionsBroken ? null : this.props.children
    )
  }
}

class Accordions extends React.Component {
  constructor() {
    super();
    
    const active = new Map();
    const accordions = document.querySelectorAll(".accordion");
    for (const accordion of accordions) {
      active.set(accordion, accordion.querySelector(".accordion-expanded"));
    }
    this.state = {
      active
    };
  }
  
  componentDidMount() {  
    const accordions = document.querySelectorAll(".accordion");
    for (const accordion of accordions) {
      const panels = accordion.querySelectorAll(".accordion-panel");
      for (const panel of panels) {
        const head = panel.querySelector(".accordion-header");
        head.addEventListener('click', () => {
          this.setState(state => {
            // clone the map
            const active = new Map(state.active);
            if (active.get(accordion) === panel) {
              active.set(accordion, null);
            } else {
              active.set(accordion, panel);
            }
            
            // This is a fake bug, crash the app if the panel has the 'explode' class
            if (panel.classList.contains("explode")) {
              throw new Error("Panel exploded!");
            }
            
            return { active };
          });
        });
      }
    }
  }

  componentDidUpdate() {
    for (const accordion of this.state.active.keys()) {
      const active = this.state.active.get(accordion);
      const panels = accordion.querySelectorAll(".accordion-panel");
      for (const panel of panels) {
        panel.classList.toggle("accordion-expanded", panel === active);
      }
    }
  }
  
  render() {
    return null;
  }
}

ReactDOM.render(
  <ErrorBoundary>
    <Accordions/>
  </ErrorBoundary>,
  document.createElement('div') // detached container
)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js