Home>

I want to implement an accordion in Javascript
I am creating an accordion by referring to the example on the site below, but for some reason it does not work.
https://flex-box.net/js-accordion/#co-index-10

Postscript
* For the accordion, click to open .accordion_content.
Click js_accordion_title again to close the open .accordion_content.

It will not open or close as it is.

There are no error messages.
Corresponding source code
<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  <link rel = "stylesheet" href = "style.css">
  <title>ninjacode</title>
     <script
       src = "https://code.jquery.com/jquery-3.4.1.js"
       integrity = "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU ="
       crossorigin = "anonymous"></script>
</head>
<body>
  <section>
        
             Accordion Title1 
            
                Accordion Content 1
            
             Accordion Title2 
            
                Accordion Content 2
            
             Accordion Title3 
            
                Accordion Content 3
            
        
  </section>
 <script type = "text/javascript" src = "sample.js"></script>
</body>
</html>
@charset "UTF-8";
* {{
    margin: 0;
    padding: 0;
  }
  .accordion {
    margin-top: 10px;
  }
  .accordion_container {
    width: 300px;
    margin: 0 auto;
  }
  .accordion_title {
    background-color: # 000;
    border: 1px solid transparent;
    color: #fff;
    font-size: 1.25em;
    padding: .625em .625em .625em 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .accordion_title :: before, .accordion_title :: after {
    content:'';
    display: block;
    background-color: #fff;
    position: absolute;
    top: 50%;
    width: 15px;
    height: 2px;
    right: 25px;
  }
  .accordion_title :: after {
    transform: rotate (90deg);
    transition-duration: .3s;
  }
  .accordion_title: hover,
  .accordion_title: active,
  .accordion_title.is-active {
    background-color: # 00aaa7;
  }
  .accordion_title.is-active :: before {
    opacity: 0;
  }
  .accordion_title.is-active :: after {
    transform: rotate (0);
  }
  .accordion_content {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    padding: 0 1.5em;
    line-height: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition-duration: .3s;
  }
  .accordion_content.is-open {
    border: 1px solid # 00aaa7;
    padding: .625em 1.5em;
    line-height: normal;/* Rewrite to number * /
    height: auto;
    opacity: 1;
  }
document.addEventListener ("DOMContentLoaded", () =>{
    const title = document.querySelectorAll ('.js-accordion-title');
    for (let i = 0;i<title.length;i ++) {
      let titleEach = title [i];
      let content = titleEach.nextElementSibling;
      titleEach.addEventListener ('click', () =>{
        titleEach.classList.toggle ('is-active');
        content.classList.toggle ('is-open');
      });
    }
  });
What I tried

I don't think there are any misspellings in Javascript and HTML. (I copied the code on the site, but it didn't work.)

Supplementary information (FW/tool version, etc.)

Please provide more detailed information here.

  • Answer # 1

    For the time being, the class attached to h4 is "js_accordion_title"
    Since the reference in js is "'.js-accordion-title'"
    There is a difference between hyphens and underscores

Related articles