Multiple Show More / Show Less

Question

How can I toggle the text to be show more/show less and change the icon arrow to flip up/down?

Updated code:

JS

$('.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');
});

HTML

                <div class="show-more-wrapper">
                  <a href="#" class="show-more">Show More<i class="glyphicon glyphicon-chevron-down"></i></a>
                  <div class="additional-content">
                    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.
                    </div>
                </div>
                <div class="show-more-wrapper">
                  <a href="#" class="show-more">Show More<i class="glyphicon glyphicon-chevron-down"></i></a>
                  <div class="additional-content">
                    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.
                  </div>
                </div>

Answer 1

You are utilizing two different means of showing and hiding when you should only be using one.

As another poster mentioned, you should have unique references to show and hide content, otherwise they all open and close together.

Take a look at the bootstrap example here if you want to use that method (no need to write any of your own javascript when using data-toggle): http://getbootstrap.com/javascript/#collapse-example-accordion

Your javascript is not working though (you might as well remove it). If you wanted to utilize javascript to have more control (and utilize "this" as you mentioned), you should remove the bootstrap data-toggle etc and write your own logic to show and hide certain content based upon selectors. Something along the lines of:

$('.show-more').on('click', function() {
  $(this).siblings('.additional-content').toggle();
});

https://jsfiddle.net/r0m4n/kppn1mww/

Notice, there is no need to iterate through each and bind to the click event. The jQuery selector binds the handler to all elements with the class automatically.

Answer 2

You need to use unique IDs or classes for the different toggle-able sections. Here you gave them both the same class .additional-content so they are all going to open or close together. Name the second one .additional-content-2 and change it in the trigger link and add a new script for this one.

Answer 3

This code changed the text and icon.

 function showMore() {
$('.show-more').on('click', function() {
   $(this).parent('.show-more-wrapper').find('.additional-content').toggle(); //Show/Hide Content
   $(this).find('span').text($(this).find('span').text() == 'Show More' ? 'Show Less' : 'Show More'); //Change Text              
   $(this).find('i').toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); //Change icon
});
}