如何使手风琴（CSS + javascript）工作？

Question

I have this code so far:

 var acc; acc = document.getElementByClassName('button'); acc.onclick = function() { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } 

 div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; } div.panel.show { opacity: 1; max-height: 500px; } .button{ display:block; height:431px; width:100%; font-family: Futura, 'Trebuchet MS', Arial, sans-serif; color:black; font-size:80px; margin:0 auto; background-color:transparent; border-style:none; } .button:hover, .button.active{ background: url('pcluj.jpg') ; background-size: cover; } 

 <center><button class="button" id="button">CLUJ</button></center> <div class="panel"> <p>Lorem ipsum...</p> </div> 

Right now it doesn't work and I don't know why!! The div doesn't show up when I press the first button. What is the solution? Please help!

It looked like my post was only code so I had to write this in order to be able to post ...........

Answer 1

javascript：

  window.onload = function(){
    var acc;
    acc = document.getElementById('button');

    acc.onclick = function()
    {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

html:
<button class="button" id="button">CLUJ</button> <div class="panel"> <p>Lorem ipsum...</p> </div>

Answer 2

One way to achieve it if you are only supporting Chrome and Safari or Mobile Devices is to use the HTML5 details element and style it with CSS. You won't even need JavaScript.

Read on: http://dipaksblogonline.blogspot.in/2014/09/html5-details-element.html

Basic Demo: http://jsfiddle.net/8mthoj5g/1/

<details open>
    <summary>Click me to toggle more information</summary>
    <div>The details element is used as a widget to show/hide additional information.</div>    
</details>

Another way is to use the onclick as attribute on the button - it will work -

<button class="button" id="button1" onclick="someFunc()">CLUJ</button>

Demo: https://jsfiddle.net/Lp05m27p/

Answer 3

Jquery

$("#button").click(function(){
  var divPnl = $('.panel');
  $(this).toggleClass("active");
  divPnl.toggleClass("show");
});

fiddle link

Answer 4

Ideally you would use an established method or existing library for an accordion such as an Unordered List but what you've got already can be made to work with a few minor changes:

Firstly, use querySelectorAll to select the .button element. This returns a NodeList .

Iterate through the NodeList using a basic for-loop and add an event listener to each item which calls a method to toggle the .button 's active class.

Rather than find the children of the active .button we simply use CSS2's Adjacent Sibling Selector to select the .button s next sibling .panel

EG:

 // Get the .buttons var buttons = document.querySelectorAll('.button'); // For each button for (i = 0; i < buttons.length; ++i) { //add an event listener buttons[i].addEventListener("click", onButtonClick, false); } // On button click... function onButtonClick(){ this.classList.toggle("active"); } 

 div.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: 0.6s ease-in-out; opacity: 0; } /* div.panel.show { opacity: 1; max-height: 500px; } */ .button{ display:block; height:50px; width:100%; font-family: Futura, 'Trebuchet MS', Arial, sans-serif; color:black; font-size:20px; margin:0 auto; background-color:transparent; border-style:none; outline:none; } .button:hover, .button.active{ background:#eee url('http://lorempixel.com/100/20/') ; background-size: cover; } #button1:hover, #button1.active{ background-image:url('http://lorempixel.com/100/20/'); } #button2:hover, #button2.active{ background-image:url('http://lorempixel.com/200/20/'); } /* adjacent sibling selector to select a .panel next to an button.active: */ .button.active + .panel { opacity: 1; max-height: 500px; } 

 <button class="button" id="button1">ONE</button> <div class="panel"> <p>Lorem ipsum one...</p> </div> <button class="button" id="button2">TWO</button> <div class="panel"> <p>Lorem ipsum two...</p> </div> 

Answer 5

You have several errors in your Javascript code. You are trying to assign a click event handler to an element before it actually exists in the DOM. You are also referring to the div that you are trying to show incorrectly. See below a working JavaScript code with comments and your mistakes fixed.

// You need to make sure that the button element exists before trying to attach a click handler to it.
// You can do that by running the function when the onload event is triggered.
window.onload = function () {
    var acc;
    acc = document.getElementsByClassName('button')[0]; 
    // You have errors in the above line, "s" is missing in getElement/s/ByClassName, also that method returns an array, not an element, so you need to add [0] at the end.
    acc.onclick = function()
    {
        this.classList.toggle("active");

        // this.nextElementSibling.classList.toggle("show");
        // This does not work because <button> is in <center> and the panel div is therefore not its sibling.

        // there are many ways to reference the panel div, eg:
        var panel= document.getElementsByClassName("panel")[0];
        panel.classList.toggle("show");
    }
}