Skip to content

[BUG] Accordion animation is janky when some padding is given to the content #239

Description

@cybersaksham

Link to the code that reproduces this issue

No response

Description

When a padding is given to the Accordion content using the class name ns-accordion-content, the opening and closing animation breaks.

Steps to Reproduce

import { NSAccordion } from "@newtonschool/grauity";
import styled from "styled-components";

const StyledAccordionWrapper = styled.div`
  .ns-accordion-content {
    padding: 20px;
  }
`;

export default function App() {
  return (
    <>
      <StyledAccordionWrapper>
        # These 2 accordions have padding inside them
        <NSAccordion title="Click Me">
          <div>This is the accordion description.</div>
          <div>This is the accordion description.</div>
          <div>This is the accordion description.</div>
        </NSAccordion>
        <NSAccordion title="Click Me">
          <div>This is the accordion description.</div>
          <div>This is the accordion description.</div>
          <div>This is the accordion description.</div>
        </NSAccordion>
      </StyledAccordionWrapper>
      <NSAccordion title="Click Me">
        <div>This is the accordion description.</div>
        <div>This is the accordion description.</div>
        <div>This is the accordion description.</div>
      </NSAccordion>
      <NSAccordion title="Click Me">
        <div>This is the accordion description.</div>
        <div>This is the accordion description.</div>
        <div>This is the accordion description.</div>
      </NSAccordion>
    </>
  );
}

Expected behavior

No response

Actual behavior

No response

Browser

All

Version

v3.0.20

Additional Environment Information

Additional context

Screen.Recording.2025-05-29.at.4.14.50.PM.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions