title: Multiple Show More / Show Less
body: <p>How can I toggle the text to be show more/show less and change the icon arrow to flip up/down? </p>
  
  <p>Updated code:</p>
  
  <p>JS</p>
  
  <pre><code>$('.show-more').on('click', function() {
     $(this).parent('.show-more-wrapper').find('.additional-content').toggle();
     $(this).text('Show Less');
     $('i', this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>                &lt;div class="show-more-wrapper"&gt;
                    &lt;a href="#" class="show-more"&gt;Show More&lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;div class="additional-content"&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;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="show-more-wrapper"&gt;
                    &lt;a href="#" class="show-more"&gt;Show More&lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/a&gt;
                    &lt;div class="additional-content"&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;/div&gt;
                  &lt;/div&gt;
  </code></pre>