Close one accordion item when another opens

[gregorsart]

We managed to build a working basic accordion. Now we want to implement a behaviour that only one item can be open at a time.
We have an accordion component and also an faq page where the accordion component lives.

We lifted up state from the accordion component to the faq page and we also saved the whole accordion information in a state object.

When the user clicks an accordion item, the key-value pair in the state object called "is open" should change from true to false.
This then should trigger the item to hide or show.

Ty for your help ...

We have the following code in place:

  const [accordionData, setAccordionData] = useState([
    {
      id: 1,
      isOpen: true,
      title: "Do I need to get a pure breed dog?",
      content: `Absolutely not! Animal rescues will tell you everything about the dogs, including the breeds they may be mixed with and the traits they have. They know best what the dog needs and will advise you on whether you could be their person.`,
    },
    {
      id: 2,
      isOpen: false,
      title: "Is it important that my landlord knows about me getting a dog?",
      content: `It's extremely important. If you get a dog behind your landlord's back, they could kick you and your new dog out on the street. You should always take care of everything first before your puppy arrives.`,
    },
    {
      id: 3,
      isOpen: false,
      title: "Where should I get my dog from?",
      content: `In our opinion, you should always adopt and not shop. There are many great dogs out there in animal shelters that are looking for a place to call home. Even if you are looking for a specific breed, there are animal rescues that specialize in taking care of that particular breed. Here you can find places nearby you: https://www.tierschutzbund.de/tierheim-finder`,
    },
    {
      id: 4,
      isOpen: false,
      title: "What is a good place to find out more about dog ownership?",
      content: `Here you get a good overview of some basic things to keep in mind: https://www.tierschutzbund.de/tiere-themen/haustiere/hunde (DE) and https://www.four-paws.org/campaigns-topics/animals/dog (EN)`,
    },

    {
      id: 5,
      isOpen: false,
      title: "Should I immediately go get my matching dog now?",
      content: `No! Dog ownership comes with a lot of responsibility. A dog can live up to 15 years and you should think well about whether you can provide the care the dog needs for that long, financially, emotionally and otherwise.`,
    },
    {
      id: 6,
      isOpen: false,
      title: "How can I know more about a dog breed?",
      content: `You can view all dog breeds on the "All dogs page" that can be found in the hamburger navigation, and there you can search for a breed. `,
    },
    {
      id: 7,
      isOpen: false,
      title: "Can I decide on a dog with the app alone?",
      content: `No. While we carefully put together our algorithm, the seven questions asked are not enough to find out if it's the right dog for you. There are many factor to consider such as who you live with, how much space you have and how much training you can provide the dog in order to fully understand if a dog could live with you happily.`,
    },
  ]);

  function toggleAccordion(id) {
    setAccordionData((accordionItems) => {
      return accordionItems.map((item) => {
        if (item.id === id) {
          item.isOpen = !item.isOpen;
        }
      });
    });
    console.log("accordion data", accordionData);
  }
  return (
    <div>
      {console.log("accordion data after return", accordionData)}
      <Headline>FAQs</Headline>
      <StyledList>
        {accordionData.map(({ title, content, id, isOpen }) => (
          <Accordion
            key={id}
            id={id}
            title={title}
            content={content}
            isOpen={isOpen}
            toggleAccordion={toggleAccordion}
          />
        ))}
      </StyledList>
    </div>
  );
} 

export default function Accordion({
  title,
  content,
  isOpen,
  toggleAccordion,
  id,
}) {
  const [isActive, setIsActive] = useState(isOpen);

  return (
    <StyledAccordionItem onClick={() => toggleAccordion(id)}>
      <StyledQuestion>
        <div>{title}</div>

        {isActive && (
          <StyledIcon
            src="/chevron-up.svg"
            alt="Chevron up arrow"
            width={29}
            height={29}
            blurDataURL="data:..."
          />
        )}
        {!isActive && (
          <StyledIcon
            src="/chevron-down.svg"
            alt="Chevron down arrow"
            width={29}
            height={29}
            blurDataURL="data:..."
          />
        )}
      </StyledQuestion>
      {isActive && <StyledAnswer>{content}</StyledAnswer>}
    </StyledAccordionItem>
  );
}

[onemanwenttomow]

Firstly, kudos on your work so far—it's a commendable effort!

I'd like to introduce you to some hidden gems in HTML— the details and summary tags. These elements offer built-in functionality for creating accordions without the need for javascript. They handle a significant part of the heavy lifting.

To implement this, you just need to keep track of an identifier (like an id or index) for the currently open detail. I've put together an example for you to take a look at here.

It's worth noting that there's an exciting feature on the horizon (see here), which promises to make this process even more straightforward. However, keep in mind that, as of now, this functionality is not universally available in browsers, except in previews and experimental versions.

[gregorsart]

ty very much, it worked and looks good.

[gregorsart]

Hi Pete, here is what we finally came up with. A mixture of your approach and ours.

   {
      id: 1,
      isOpen: true,
      title: "Do I need to get a pure breed dog?",
      content: `Absolutely not! Animal rescues will tell you everything about the dogs, including the breeds they may be mixed with and the traits they have. They know best what the dog needs and will advise you on whether you could be their person.`,
    },


export default function Accordion() {
  const [accordionData, setAccordionData] = useState(faqData);

  function handleToggle(id, e) {
    e.preventDefault();
    setAccordionData((accordionItems) => {
      const info = accordionItems.find((info) => info.id === id);

      if (info) {
        return accordionItems.map((info) => {
          if (info.id === id) return { ...info, isOpen: !info.isOpen };
          else return { ...info, isOpen: false };
        });
      }

      return [...accordionItems, { id, isOpen: false }];
    });
  }
  if (!accordionData) return null;

  return accordionData.map(({ id, title, content, links, isOpen }) => (
    <StyledDetails key={id} open={isOpen}>
      <StyledSummary onClick={(e) => handleToggle(id, e)}>
        {title}

        <StyledIcon
          src={isOpen ? "/chevron-up.svg" : "/chevron-down.svg"}
          alt={isOpen ? "Chevron up arrow" : "Chevron down arrow"}
          width={29}
          height={29}
          blurDataURL="data:..."
        />
      </StyledSummary>

      <StyledAnswer>
        {content}
        {links.map((link) => (
          <span key={link.id}>
            <br />
            <StyledSimpleLink key={link.id} href={link.url}>
              {" "}
              {link.name}
            </StyledSimpleLink>
          </span>
        ))}
      </StyledAnswer>
    </StyledDetails>
  ));
}