Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to HTML
Preview Source Code
Download
HTML
CSS
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*{ box-sizing: border-box;}
.leadership-scn{ max-width: 1100px; margin: auto; width: 100%; font-family:"Poppins"}
/**Typeo CSS Start**/
.ldr-list {
    display: flex;
    flex-flow: row wrap;
    width: calc(100% + 30px);
    margin-left: -15px;
}

.ldr-list .ldr-item {
    max-width: 33.3%;
    width: 100%;
    padding: 15px 15px;
}

.ldr-list img {
    max-width: 100%;
    display: block;
}
.ldr-cont {
    border: #ccc 1px solid;
    width: 100%;
    padding: 15px;
}
.ldr-cont .name-text {
    font-size: 18px;
    font-weight: 600;
}
.ldr-cont  p {
    margin: 0px;
    padding: 0px;
}
.teamview {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin: 10px 0;
}
.teamview .teamviewmore {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    display: inline-block;
}
JS
var morebox = $('.ldr-item').length;
$(".ldr-item").slice(6, morebox).hide();
 if ($(".ldr-item:hidden").length != 0) {
  $(".loadmore").show();
 }		
$(".loadmore").on('click', function (e) {
e.preventDefault();
setTimeout(function() {
 $(".loadmore").addClass('loadmore-less');
},500)
 $(".ldr-item:hidden").slice(0, 1000).slideDown();
 if ($(".ldr-item:hidden").length == 0) {
	$(".teamviewmore").text('View Less');	
 }	
 });
$(document).on('click', '.loadmore-less', function(e){
 e.preventDefault();
	$(".ldr-item").slice(6, morebox).slideUp();
	$(".loadmore").removeClass('loadmore-less');
	$(".teamviewmore").text('View More');
	setTimeout(function() {
		$(".loadmore").removeClass('loadmore-less');
 },500)
});
JS File

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *