Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

html - How to make an accordion with array in Javascript?

in Technique[技术] by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
322 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...