title: how to change the div height property to auto when I click on '"more" button
body: <p>there is a list of elements and i need to expand each element on click the more button and collapse each element when click on the less button. but when i click to more button all div will open at the same time also i can't close them . click on the less button.
  here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .hidi{
      height:20px;
      overflow:hidden;
      border:1px solid red;
  
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="hidi"&gt;
  &lt;div class="uner-sch"&gt;
  1
  &lt;/div&gt;
  &lt;div class="uner-sch"&gt;
   2
  &lt;/div&gt;
  &lt;div class="uner-sch"&gt;
  3
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="more"&gt; ... More +&lt;/div&gt;
  
  &lt;div class="hidi"&gt;
  &lt;div class="uner-sch"&gt;
  1
  &lt;/div&gt;
  &lt;div class="uner-sch"&gt;
   2
  &lt;/div&gt;
  &lt;div class="uner-sch"&gt;
  3
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="more"&gt; ... More +&lt;/div&gt;
  
  &lt;script&gt;
  $(".more").click(function(){
  var el = $('.hidi'),
      curHeight = el.height(),
      autoHeight = el.css('height', 'auto').height();
  el.height(curHeight).animate({height: autoHeight}, 1000),
            $(this).text('... less -');
  
  
  });
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>