I'm experimenting with creating an accordion using HTML, CSS, and JavaScript. I've managed to set it up, however, the array text is only displaying in one accordion item and the buttons are not functioning for each individual accordion. Is there a way to display the text from each object in the array and make all buttons work independently? Any suggestions on how I can achieve this would be greatly appreciated. Thank you!
const datas = [ {
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
}
];
let container = document.querySelector(".container");
let accordion = document.querySelector(".accordion");
let accordion__content = document.querySelector(".accordion__content");
let accordion__show = document.querySelector(".accordion__show");
datas.map((data)=> {
accordion__show.addEventListener("click" , (e)=> {
e.preventDefault();
accordion__content.classList.toggle("show_text");
accordion__content.innerHTML = datas[0].content;
if ( accordion__show.innerHTML === "+") {
accordion__show.innerHTML = "-";
} else {
accordion__show.innerHTML = "+";
}
})
})@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
body {
padding: 0;
margin: 0;
background-color: #F2F7FE;
font-weight: bold;
font-family: 'Quicksand',sans-serif;
}
main {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.accordion__content {
display: none;
}
.show_text {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.accordion {
width:calc(650px - 30px);
background-color: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.accordion__header {
width: 100%;
min-height: auto;
display: flex;
text-align: center;
align-items: center;
justify-content: space-around;
flex-direction: row;
}
.accordion button {
border:2px solid gray;
background-color: transparent;
padding: 10px 15px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="container">
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all nonsense cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>