Managing the vertical space within a nested accordion section

Question

Managing the vertical space within a nested accordion section

I've built a custom accordion component, but I'm encountering scrolling issues when trying to use nested levels within the accordion. I'd like to prevent scrolling inside the accordion section and instead have the page scroll below it.

Any suggestions on how to achieve this?

App.js

import Accordion from "./Accordion";

export default function App() {
  return (
    <div>
      <Accordion title="What is lorem ipsum?">
        <Accordion title="What is lorem ipsum?">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s.
        </Accordion>
        <Accordion title="What is lorem ipsum?">
          <ul>
            <li>
              a) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              b) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              c) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              d) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
          </ul>
        </Accordion>
      </Accordion>
      <Accordion title="What is lorem ipsum?">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s.
      </Accordion>
      <Accordion title="What is lorem ipsum?">
        <ul>
          <li>
            a) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            b) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            c) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            d) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
        </ul>
      </Accordion>
    </div>
  );
}

If you want to see the code in action, check out the codesandbox link

Any assistance would be greatly appreciated

javascript css reactjs

Answer 1

Answer №1

Based on the code provided in codesandbox:

Accordian/index.js

several modifications have been successfully implemented. Feel free to review them.

import React, { useState, useRef } from "react";
import Chevron from "./Chevron";

import "./style.css";

function Accordion(props) {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");
  const [setRotate, setRotateState] = useState("accordion__icon");
  const [setMargin, setMarginState] = useState("0px");

  const content = useRef(null);

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : "500px" // adjust pixel based on your requirements 
    );
    setRotateState(
      setActive === "active" ? "accordion__icon" : "accordion__icon rotate"
    );
    setMarginState(setActive === "active" ? "0px" : "1rem");
  }

  return (
    <div className="accordion__section">
      <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
        <p className="accordion__title">{props.title}</p>
        <Chevron className={`${setRotate}`} width={10} fill={"#777"} />
      </button>
      <div
        ref={content}
        style={{
          maxHeight: `${setHeight}`,
          marginBottom: `${setMargin}`,
          overflow: "hidden" // ensure overflow is hidden
        }}
        className="accordion__content"
      >
        <div className="accordion__text">{props.children}</div>
      </div>
    </div>
  );
}

export default Accordion;

Answer 2

Based on the code provided in codesandbox:

Accordian/index.js

several modifications have been successfully implemented. Feel free to review them.

import React, { useState, useRef } from "react";
import Chevron from "./Chevron";

import "./style.css";

function Accordion(props) {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");
  const [setRotate, setRotateState] = useState("accordion__icon");
  const [setMargin, setMarginState] = useState("0px");

  const content = useRef(null);

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : "500px" // adjust pixel based on your requirements 
    );
    setRotateState(
      setActive === "active" ? "accordion__icon" : "accordion__icon rotate"
    );
    setMarginState(setActive === "active" ? "0px" : "1rem");
  }

  return (
    <div className="accordion__section">
      <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
        <p className="accordion__title">{props.title}</p>
        <Chevron className={`${setRotate}`} width={10} fill={"#777"} />
      </button>
      <div
        ref={content}
        style={{
          maxHeight: `${setHeight}`,
          marginBottom: `${setMargin}`,
          overflow: "hidden" // ensure overflow is hidden
        }}
        className="accordion__content"
      >
        <div className="accordion__text">{props.children}</div>
      </div>
    </div>
  );
}

export default Accordion;

Managing the vertical space within a nested accordion section

Answer №1

Similar questions

Implementing script loading within the Angular scope

Retrieve Data from Form Using PHP and Ajax

Hydration Error arises when Next.js SSG Suspense is triggered

Display JSON data in a hierarchical tree structure using AngularJS

Tips on incorporating animations into a class design?

Display the text above overlapping div elements

The performance of the NextJs app API is unpredictable when deployed on Vercel

Having trouble with Javascript/jQuery not functioning in IE8?

Prevent the need to keep deleting text when entering data into selectize.js <select>_dropdown

The width of the unordered list is not what I defined

Troubleshooting: Font-Face Won't Load on Any Browser

Accessing external content within our webpage

Choose CSS Option

What could be causing my scene to fail to render?

When using Array.prototype.map(callback, thisArg), the second parameter is disregarded

Show segments of video stream on page using node.js

How to eliminate Image notifications in NextJS

Here is a guide on how to specify function selection values for a total order. By default, the selection will have predetermined values, and upon clicking the sum button,

The information seems to not be getting transferred to the req.body variables from the HTML form

Error in Next.js using next-auth/react: "PrismaClient cannot be executed in the browser"