title: Vanilla Javascript Accordion Functionality
body: <p>I need help with closing other panels once I open a click on a different panel. I have been trying to get my head around it for the past week but I'm just not able to. </p>
  
  <p>I don't want to use a jquery library, I want to be able to code this code directly into my website.</p>
  
  <p>I think the javascript code needed is simple in concept but hard to write for someone like me. I still don't exactly understand how javascript commands, functions, etc. work.</p>
  
  <p>Any help or guidance is greatly appreciated!</p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="accordion.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
  
           &lt;h3 class="accordion"&gt;Basics of Sailing&lt;/h3&gt;
            &lt;div class="panel"&gt;
             &lt;div class="col col-4 middle"&gt;
              &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
               &lt;h4&gt;Before Choosing a Sailboat&lt;/h4&gt;
               &lt;p&gt;Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col col-4 middle"&gt;
          &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
          &lt;h4&gt;Car Topping &amp; Trailing&lt;/h4&gt;
          &lt;p&gt;It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col col-4 middle"&gt;
          &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
          &lt;h4&gt;Safety Equipment&lt;/h4&gt;
          &lt;p&gt;You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;h3 class="accordion"&gt;Basics of Sailing&lt;/h3&gt;
      &lt;div class="panel"&gt;
        &lt;div class="col col-4 middle"&gt;
          &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
          &lt;h4&gt;Before Choosing a Sailboat&lt;/h4&gt;
          &lt;p&gt;Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col col-4 middle"&gt;
            &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
             &lt;h4&gt;Car Topping &amp; Trailing&lt;/h4&gt;
            &lt;p&gt;It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.&lt;/p&gt;
              &lt;/div&gt;
            &lt;div class="col col-4 middle"&gt;
             &lt;!-- &lt;div class="space"&gt;&lt;/div&gt; --&gt;
             &lt;h4&gt;Safety Equipment&lt;/h4&gt;
             &lt;p&gt;You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.&lt;/p&gt;
            &lt;/div&gt;
           &lt;/div&gt;
  
         &lt;script src="accordion.js"&gt;&lt;/script&gt;
  
        &lt;/body&gt;
       &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    .accordion {
          background-color: #2364aa;
          color: #ffffff;
          cursor: pointer;
          padding: 18px;
          border: none;
          text-align: left;
          outline: none;
          font-size: 21px;
          transition: 0.4s;
      }
  
       .open, .accordion:hover {
          background-color: #205A99;
      }
  
       .accordion:after {
         content: '\f067';
         font-family: "Font Awesome 5 Free";
         color: #ffffff;
         float: right;
         font-size: 1.25em;
         line-height: 25px;
      }
  
       .open:after {
         content: "\2212";
      }
  
       .panel {
         max-height: 0;
         overflow: hidden;
         transition: 0.2s ease-out;
      }
  
      .panel-body {
         padding: 18px 0;
      }
  
      @media only screen and (min-width: 960px) {
       .container {
         display: table;
         box-sizing: border-box;
     }
       .row .col {
         margin: 10px 0;
     }
       .col {
         display: table-cell;
     }
       .col.middle {
         vertical-align: middle;
     }
       .col-2 {
         width: 50%;
         padding-right: 72px;
     }
       .col-4 {
         width: 33.33333333333333333%;
         padding-right: 72px;
     }
    }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>   var acc = document.getElementsByClassName("accordion");
     var i;
  
       for (i = 0; i &lt; acc.length; i++) {
       acc[i].addEventListener("click", function() {
       this.classList.toggle("active");
       var panel = this.nextElementSibling;
         if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
         } else {
         panel.style.maxHeight = panel.scrollHeight + "px";
         }
      });
     }
  </code></pre>