title: How to create Accordion using html, css and javascript. So that one open at a time and when open the page first one should opened by default
body: <p>I have created an accordion using following code - </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;button class="accordion"&gt;C/C++&lt;/button&gt;
  &lt;div class="panel"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
       &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;button class="accordion"&gt;JAVA&lt;/button&gt;
  &lt;div class="panel"&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
         exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  .active, .accordion:hover {
      background-color: #ccc;
  }
  
  .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  </code></pre>
  
  <p>JavaScript:</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>
  
  <p>It gives output like this-</p>
  
  <p><a href="https://i.stack.imgur.com/jAwtI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jAwtI.jpg" alt="enter image description here"></a></p>
  
  <p>But I want to first one should open when open the page by default and only one should open at a time. Like this - </p>
  
  <p><a href="https://i.stack.imgur.com/AtbHF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AtbHF.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/g6vSV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6vSV.jpg" alt="enter image description here"></a></p>
  
  <p>And there should be <strong>+</strong> sign at last open it closed and <strong>-</strong> when it opened.</p>