Panel - vanilla javascript

In this example below you will see how to do a Panel - vanilla javascript with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by trevorsaint, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright trevorsaint ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Panel - vanilla javascript</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="Panel">
  <button class="Panel-button" aria-controls="one">
    <span class="Panel-title">Button 1</span>
  </button>
  <div class="Panel-content JS-hidden" id="one">Content 1</div>
</div>

<div class="Panel">
  <button class="Panel-button" aria-controls="two">
    <span class="Panel-title">Button 2</span>
  </button>
  <div class="Panel-content JS-hidden" id="two">Content 2</div>
</div>

<div class="Panel">
  <button class="Panel-button" aria-controls="three">
    <span class="Panel-title">Button 3</span>
  </button>
  <div class="Panel-content JS-hidden" id="three">Content 3</div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/trevorsaint/panel-vanilla-javascript-BdVwRV */
.Panel-button {
  background-color: #ccc;
  border: 0 none;
  cursor: pointer;
  height: 100px;
  width: 200px;
}
.Panel-button--selected {
  background-color: red;
  color: white;
}
.Panel-content {
  padding: 24px;
}

.JS-hidden {
  display: none;
}


/*Downloaded from https://www.codeseek.co/trevorsaint/panel-vanilla-javascript-BdVwRV */
function panel() {


    // Get elements
    var panel = document.getElementsByClassName('Panel');
    var button = document.getElementsByClassName('Panel-button');
    var content = document.getElementsByClassName('Panel-content');


    var i;


    // Init
    for (i = 0; i < panel.length; i++) {
        button[i].setAttribute('aria-expanded', false);
        content[i].setAttribute('aria-hidden', true);
    }


    // Reset
    var panelReset = function() {

        for (i = 0; i < panel.length; i++) {

            button[i].classList.remove('Panel-button--selected');
            button[i].setAttribute('aria-expanded', false);

            content[i].classList.add('JS-hidden');
            content[i].setAttribute('aria-hidden', true);

        }

    };


    // Click
    var panelClick = function() {

        if (this.classList.contains('Panel-button--selected')) {

            this.classList.remove('Panel-button--selected');
            this.setAttribute('aria-expanded', false);

            this.nextElementSibling.classList.add('JS-hidden');
            this.nextElementSibling.setAttribute('aria-hidden', true);

        } else {

            panelReset();

            this.classList.add('Panel-button--selected');
            this.setAttribute('aria-expanded', true);

            this.nextElementSibling.classList.remove('JS-hidden');
            this.nextElementSibling.setAttribute('aria-hidden', false);

        }

    };

    for (i = 0; i < button.length; i++) {
        button[i].onclick = panelClick;
    }

}



// Dom ready
document.addEventListener('DOMContentLoaded', function() {
  panel();
});

Comments