Instructions

Build a fully functional expandable dropdown menu in React. The menu should allow users to click on a button (or label) to reveal the contents of the section.

Requirements All sections should be collapsed by default. Clicking on a section will toggle the visibility of the contents.

Bonus Opening a section will close the other sections such that only one section is open at a time. Although the focus is not on CSS, implement smooth opening/closing if you have time and want an extra challenge.

View Solution Guide

Instructions

Build a fully functional expandable dropdown menu in React. The menu should allow users to click on a button (or label) to reveal the contents of the section. **Requirements** All sections should be collapsed by default. Clicking on a section will toggle the visibility of the contents. **Bonus** Opening a section will close the other sections such that only one section is open at a time. Although the focus is not on CSS, implement smooth opening/closing if you have time and want an extra challenge. [View Solution Guide](https://reactstack.dev/solutions/expandable-dropdown-menu-guide)

import {useState} from "react";

export default function App() {

  return (
    <div>
      <h1>Expandable Menu Challenge</h1>
      <p>
        This is your starting point. Add interactivity so that each section
        expands/collapses when clicked.
      </p>

      {/* Section 1 */}
      <div>
        <button>
          Section 1: Introduction <span>+</span>
        </button>
        <div>
          This is the placeholder content for section 1. It should be hidden by
          default once you implement the toggle functionality.
        </div>
      </div>

      {/* Section 2 */}
      <div>
        <button>
          Section 2: Details <span>+</span>
        </button>
        <div>
          This is the placeholder content for section 2. It should be hidden by
          default once you implement the toggle functionality.
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <button>
          Section 3: Conclusion <span>+</span>
        </button>
        <div>
          This is the placeholder content for section 3. It should be hidden by
          default once you implement the toggle functionality.
        </div>
      </div>
    </div>
  );
}