JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Accordion</title>
</head>

<body>
  <div class="App">
    <h1>Accordion</h1>
    <div id="accordion-container"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CSS

body {
  font-family: sans-serif;
  text-align: center;
}

.accordion {
  width: 80%;
  margin: 0 auto;
  border: 2px solid black;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accordion:hover {
  background-color: #f1f1f1;
}

.card-content {
  display: none;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.card-content.show {
  display: block;
}

JavaScript

const URL = "https://jsonplaceholder.typicode.com/users";

async function fetchData(url) {
  const response = await fetch(url);
  return await response.json();
}

function handleToggle(i) {
	const cards = document.querySelectorAll('.card-content');
  cards.forEach((row, index) => {
  	if(i === index) {
    	row.classList.toggle('show');
    }else {
    	row.classList.remove('show');
    }
  })
}

function createAccordion(data) {
  const accordionContainer = document.getElementById('accordion-container');

  data.forEach((row, index) => {
    const accordion = document.createElement('div');
    accordion.className = 'accordion';
    accordion.textContent = row.name;

    const cardContent = document.createElement('div');
    cardContent.className = 'card-content';
    cardContent.textContent = row.email;

    accordion.addEventListener('click', () => handleToggle(index));

    accordion.appendChild(cardContent);
    accordionContainer.appendChild(accordion);
  });
}

window.onload = async function () {
  const data = await fetchData(URL);
  createAccordion(data);
};