stackoom
  简体   繁体   中英

How to make an accordion with array in Javascript?

 原文  2021-01-10 20:12:10  4   1    javascript/ html/ css/ arrays

Question

I'm trying to make an accordion with HTML, CSS, and Javascript. I made it but it displays text from an array in only one accordion item, and not on the other accordion divs and other buttons, who are not working for each accordion. I want to display object text from each array and to make all buttons work, is this possible? Thanks anyway. 

 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>

1 answers

solution1
 0 ACCPTED  2021-01-10 20:21:28

I slightly altered your javascript code, replacing the map() with forEach() .

Also, referring to accordion__content and accordion__show should be like a collection , using querySelectorAll() :

let accordion__content = document.querySelectorAll(".accordion__content");
let accordion__show = document.querySelectorAll(".accordion__show");


 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to make an accordion constructor function with pure JavaScript? How to make Accordion(CSS+javascript) work? How to make accordion in pure javascript and html How to make nested Accordion? how to make an accordion in jquery How to make a slider with accordion? How to make the accordion effect? How to make accordion with table How to make accordion not expand by default? How to make an Accordion component with Reactstrap?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM