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.querySelectorAll(".accordion__content");
let accordion__show = document.querySelectorAll(".accordion__show");
accordion__show.forEach(function (current, index) {
current.addEventListener("click", (e) => {
e.preventDefault();
accordion__content[index].classList.toggle("show_text");
accordion__content[index].innerHTML = datas[0].content;
if (current.innerHTML === "+") {
current.innerHTML = "-";
} else {
current.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>