title: how to hide child element of parent div
body: <p>Hello I am trying to remove "Hello this is short description 1 " (plz see code) line dynamically , on accordian button ("section-1", "section-2", "section-3") click. right now it's being remove but the only problem is that it's removing all other button text, I want it should be remove only from that buttton where I have clicked. this is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("accordion");
          var i;
          var short = document.getElementsByClassName('short-desc')
          
          for (i = 0; i &lt; acc.length; i++) {
              
             
              acc[i].addEventListener("click", function () {
                  
                  
                  this.classList.toggle("active");
                  var panel = this.nextElementSibling;
                  
                  
                  if (panel.style.display === "block") {
                      panel.style.display = "none";
                      
                  }
      
                  else {
                      panel.style.display = "block";
                      $(".short").closest('small').hide();
                      
                  }
              });
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
        display: none;
        background-color: white;
        overflow: hidden;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;style&gt;
      
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;h2&gt;Accordion&lt;/h2&gt;
      
      &lt;button class="accordion"&gt;Section 1
       
          &lt;small  class="short" style="color:red; display:block"&gt;Hello this is short description 1 &lt;/small&gt;
      
      &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;Section 2
          &lt;small  class="short" style="color:red; display:block"&gt;Hello this is short description 2 &lt;/small&gt;
          &lt;p id="short-desc2" style="display:none;"&gt;Hello this is short description &lt;/p&gt;
      &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;Section 3
          &lt;small class="short" style="color:red; display:block"&gt;Hello this is short description 3&lt;/small&gt;
      &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;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>