MMP310-assignment-04-Accordion Slider2

In this example below you will see how to do a MMP310-assignment-04-Accordion Slider2 with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>MMP310-assignment-04-Accordion Slider2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="accordion">
  <h2>Accordion Slider Assignment</h2>
  <div>
    <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
      type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
      more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <p>
    </ul>
  </div>
  <h2>Test Strip to see if it works</h2>
  <div>
    <ul>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
    </ul>
  </div>
  <h2>Test Strip to see if it works</h2>
  <div>
    <ul>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
    </ul>
  </div>
  <h2>Test Strip to see if it works</h2>
  <div>
    <ul>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
    </ul>
  </div>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-04-accordion-slider2-pexvGN */
#accordion {
  background-color: #72243D;
  padding: 10px;
}
#accordion h2 {
  color: #000;
  padding: 1rem;
  background-color: #A9DA88;
  width: 50%;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}
#accordion h2:hover {
  color: #fff;
  cursor: pointer;
}
#accordion h2:active {
  background-color: #71c03c;
}
#accordion ul {
  margin: 1rem;
  padding: 1rem;
  background-color: #62997A;
  width: 50%;
  margin: 0 auto;
  display: block;
}
#accordion ul li {
  list-style: .5rem;
  margin: .5rem;
  color: #72243D;
  background-color: #F0FFC9;
}
#accordion div {
  margin: 1rem;
  padding: 1rem;
  background-color: #62997A;
  width: 50%;
  margin: 0 auto;
  display: none;
}


/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-04-accordion-slider2-pexvGN */
/*jslint browser, es6, single, for, devel, this */
/*global window */
window.onload = function () {
    let accordion = document.getElementById('accordion'),
        accordionButton = document.querySelectorAll('h2'),
        accordionButtonDiv = document.querySelectorAll('h2 + div'),
        index,
        allAccordionClosed = true,
        openDivPosition;


    function toggle() {
        //compares the clicked elements position with the array of buttons and assigns the position to index
        //once compareDucumentPosition returns 0 if they match in the array index the loop breaks.x
        for (index = 0; index < accordionButton.length; index += 1) {

            if (0 === this.compareDocumentPosition(accordionButton[index])) {
                break;
            }
        }
        if (allAccordionClosed) {

            //assign index to new variable
            openDivPosition = index;

            //change the style to block can also be done with classes
            accordionButtonDiv[index].style.display = 'block';

            //accordions no longer all closed
            allAccordionClosed = false;

        } else {

            if (index === openDivPosition) {

                accordionButtonDiv[index].style.display = 'none';

                allAccordionClosed = true;

            } else {
                accordionButtonDiv[openDivPosition].style.display = 'none';

                accordionButtonDiv[index].style.display = "block";

                openDivPosition = index;
            }
        }
    }
    //add eventListeners to buttons
    for (var i = 0; i < accordionButton.length; i += 1) {
        accordionButton[i].addEventListener('click', toggle, false);
    }

}

Comments