Hi,

The else if part of this code is not working. Does any one know why?

HTML

2. <div class="row tile-list-wrapper tile-person-list">
3. 
   
4. <div class="js-reveal-target">
5. <!--#include file="tile-person.html" -->
6. </div>
7. 
   
8. <div class="js-reveal-target">
9. <!--#include file="tile-person.html" -->
10. </div>
11. 
    
12. <div class="js-reveal-target">
13. <!--#include file="tile-person.html" -->
14. </div>
15. 
    
16. <div class="js-reveal-target">
17. <!--#include file="tile-person.html" -->
18. </div>
19. 
    
20. <div class="js-reveal-target">
21. <!--#include file="tile-person.html" -->
22. </div>
23. 
    
24. <div class="js-reveal-target">
25. <!--#include file="tile-person.html" -->
26. </div>
27. 
    
28. <div class="js-reveal-target">
29. <!--#include file="tile-person.html" -->
30. </div>
32. <div class="columns">
33. <button class="button hollow primary js-reveal-more-trigger">See more people</button>
34. </div>
35. 
    
36. </div>

JQuery

2. var allInstances = $('.js-reveal-target'),
3. revealMoreButtons = $('.js-reveal-more-trigger'),
4.                         numberToShow = 2;
5. 
   
6. var revealEffect = function () {
7. 
   
8. allInstances.slice(0, numberToShow).show();
9. 
   
10. if ($('.js-reveal-target:hidden').length > 0) {
11. revealMoreButtons.on('click', function (e) {
12. e.preventDefault();
13. $('.js-reveal-target:hidden').slice(0, numberToShow).slideDown();
14. $('html,body').animate({
15. scrollTop: $(this).offset().top
16. }, 1500);
17. });
18. } else if ($('.js-reveal-target:hidden').length == 0) {
19.                         revealMoreButtons.text('See less people');
20. revealMoreButtons.on('click', function (e) {
21. e.preventDefault();
22. $('.js-reveal-target').slice(0, numberToShow).hide();
23. });
24. }
25. 
    
26. }; // End of revealEffect function