@@ -427,37 +427,51 @@ <h5 class="title">
427
427
dataType : 'json' ,
428
428
success : function ( data ) {
429
429
430
- //slice array to two parts
431
- if ( data . length >= 8 ) {
432
- let partOne = data . slice ( 0 , 8 ) ;
433
- let partTwo = data . slice ( 8 ) ;
430
+ // Define global variable to keep track of displayed profiles
431
+ let displayedProfiles = 8 ;
434
432
435
- //mustache render - part one
436
- let contentPartOne = Mustache . render ( $ ( "#templateTeam" ) . html ( ) , { "data" : partOne } ) ;
433
+ // Function to display profiles based on the number to show
434
+ function displayProfiles ( numToShow ) {
435
+ // Slice the data array based on the number to show
436
+ let profilesToShow = data . slice ( 0 , numToShow ) ;
437
+ // Render the profiles using Mustache
438
+ let content = Mustache . render ( $ ( "#templateTeam" ) . html ( ) , { "data" : profilesToShow } ) ;
439
+ // Display the rendered profiles
440
+ $ ( "#teamContent" ) . html ( content ) ;
441
+ }
437
442
438
- //display first 8 profiles
439
- $ ( "#teamContent" ) . html ( contentPartOne ) ;
440
- $ ( "#btnShowLess" ) . hide ( ) ;
441
- //hide button
442
- $ ( "#btnShowMore" ) . click ( function ( ) {
443
- let contentPartTwo = Mustache . render ( $ ( "#templateTeam" ) . html ( ) , { "data" : partTwo } ) ;
444
- $ ( "#teamContent" ) . append ( contentPartTwo ) ;
443
+ // Displaying first 8 profiles
444
+ displayProfiles ( displayedProfiles ) ;
445
+ $ ( "#btnShowLess" ) . hide ( ) ;
446
+
447
+
448
+ // Show More button click event
449
+ $ ( "#btnShowMore" ) . click ( function ( ) {
450
+ // Increment the number of displayed profiles
451
+ displayedProfiles += 8 ;
452
+ // Display profiles based on the updated count
453
+ displayProfiles ( displayedProfiles ) ;
454
+ // Hide or show appropriate buttons
455
+ if ( displayedProfiles >= data . length ) {
445
456
$ ( "#btnShowMore" ) . hide ( ) ;
446
- $ ( "#btnShowLess" ) . show ( ) ;
447
- } ) ;
448
- $ ( "#btnShowLess" ) . click ( function ( ) {
449
- $ ( "#teamContent" ) . html ( contentPartOne ) ;
450
- $ ( "#btnShowMore" ) . show ( ) ;
451
- $ ( "#btnShowLess" ) . hide ( ) ;
452
- } ) ;
453
- } else {
454
- //mustache render
455
- let content = Mustache . render ( $ ( "#templateTeam" ) . html ( ) , { "data" : data } ) ;
457
+ }
458
+ $ ( "#btnShowLess" ) . show ( ) ;
459
+ } ) ;
456
460
457
- //display first 8 profiles
458
- $ ( "#teamContent" ) . html ( content ) ;
461
+ // Show Less button click event
462
+ $ ( "#btnShowLess" ) . click ( function ( ) {
463
+ // Reset the displayed profiles count to 8
464
+ displayedProfiles = 8 ;
465
+ // Display the initial 8 profiles
466
+ displayProfiles ( displayedProfiles ) ;
467
+ // Hide the Show Less button
468
+ $ ( "#btnShowLess" ) . hide ( ) ;
469
+ // Show the Show More button
470
+ $ ( "#btnShowMore" ) . show ( ) ;
471
+ } ) ;
459
472
460
- //hide button
473
+ // Hide buttons if there are no more than 8 profiles
474
+ if ( data . length <= 8 ) {
461
475
$ ( "#btnShowMore" ) . hide ( ) ;
462
476
$ ( "#btnShowLess" ) . hide ( ) ;
463
477
}
0 commit comments