claude-3
11/17/2019 - 2:13 PM

Accordion

Accordion

accordion.markdown
content_copyfile_download
  • Rendered
  • Source

Accordion

A Pen by Claude on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <div class="accordion_wrap">
            <p class="accordion_header">アコーディオン1</p>
            <div class="accordion_detail hide">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos vel ea quas itaque placeat accusantium quaerat maxime fuga consequuntur, soluta voluptates, commodi asperiores dolore assumenda, animi odio sed iste? Perspiciatis.
            </div>
        </div>
        <div class="accordion_wrap">
            <p class="accordion_header">アコーディオン2</p>
            <div class="accordion_detail hide">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos vel ea quas itaque placeat accusantium quaerat maxime fuga consequuntur, soluta voluptates, commodi asperiores dolore assumenda, animi odio sed iste? Perspiciatis.
            </div>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>
script.js
content_copyfile_download
'use strict';

let accordionMenu = document.getElementsByClassName('accordion_header');

function accordionShow() {
    let accordionContent = this.nextElementSibling;
    accordionContent.classList.toggle('hide');
}

for(let i = 0; i < accordionMenu.length; i++) {
    accordionMenu[i].addEventListener('click', accordionShow);
}
style.scss
content_copyfile_download
@charset "utf-8";
* {
    box-sizing: border-box;
}
.accordion_wrap {
    width: 500px;
    border-radius: 10px;
    background: #efefef;
    overflow: hidden;
}
.accordion_wrap + .accordion_wrap {
    margin-top: 10px;
}
.accordion_header {
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    background: #ddd;
    margin: 0;
    cursor: pointer;
}
.accordion_detail {
    border-radius: 0 0 10px 10px;
    padding: 10px;
}
.hide {
    display: none;
    opacity: 0;
    height: 0;
}