Cara Membuat Load More Dengan HTML CSS dan jQuery

Hallo sahabat, berjumpa kembali bersama saya di Kursus Web Design. Dalam kesemparan ini kita akan belajar tentang Cara Membuat Load More Dengan HTML CSS dan jQuery. Load more yang akan dibuat disini ,ada content yang tersembunyi dimana akan dimunculkan.

Kenapa harus ada load more atau sebuah button yang click, agar kita dapat melihat content yang tersembunyi. Tujuan ada sebuah button load more tentu ada maksudnya yaitu agar content tidak terlalu banyak yang ditampilkan atau untuk membuat tampilan pada website dengan content banyak bisa lebih rapih.

Bagaimana Cara Membuat Load More Dengan HTML CSS dan jQuery ,yuk ikuti langkah-langkah berikut ini:

Pertama sahabat buat struktur HTML terlebih dahulu seperti dibawah ini:

<div class="wrapper">
    <div class="title">Membuat Show More Menggunakan HTML CSS dan jQuery</div>
    <h4>Contoh Tools Generate Dummy Text</h4>
    <ul>
        <li>Lorem ipsum</li>
        <li>Blind Text Generator</li>
        <li>Random Text Generator</li>
        <li>Cameron Creative Filler Text</li>
        <li>Twipsum</li>  
        <li>HTML Ipsum</li>
        <li>Adhesion Text</li>
        <li>Blokk</li>
        <li>Loripsum</li>
        <li>Malevole text generator</li>
        <li>Bacon Ipsum</li>
    </ul>
    <div class="sholes_btn">
        <span class="sholes_text">Show More</span> <span class="arrow">
      <i class="fas fa-angle-down"></i>
      </span>   
    </div>    
</div>

<div class="title">Membuat Show More Menggunakan HTML CSS dan jQuery</div>

<h4>Contoh Tools Generate Dummy Text</h4>

<ul>

<li>Lorem ipsum</li>

<li>Blind Text Generator</li>

<li>Random Text Generator</li>

<li>Cameron Creative Filler Text</li>

<li>Twipsum</li>

<li>HTML Ipsum</li>

<li>Adhesion Text</li>

<li>Blokk</li>

<li>Loripsum</li>

<li>Malevole text generator</li>

<li>Bacon Ipsum</li>

</ul>

</span>

</div>

Kedua kita akan menyisipkan library dari jQuery dan Fontawesome

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

Selanjutnya tambahkan style CSS agar tampilan lebih mnearik seperti code berikut

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: #e4e4e4;
  font-size: 14px;
  line-height: 22px;
}

.wrapper{
  width: 500px;
  margin: 50px auto 0;
  background: #fff;
  padding: 30px 40px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
}

.wrapper .title{
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 25px;
  text-align: center;
  line-height: 25px;
}

.wrapper  ul{
    height: 70px;
    overflow: hidden;
    padding-left: 15px;
}

.wrapper  ul.active{
  height: auto;
}

.wrapper  ul li{
  margin-bottom: 5px;
  list-style: none;
  position: relative;
}

.wrapper  ul li:before{
    content: "";
    position: absolute;
    top: 8px;
    left: -12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #bfbfbf;
}
 
.wrapper .sholes_btn{
  margin-top: 15px;
  font-weight: 700;
  color: #ff406c;
  cursor: pointer;
  font-size: 15px;
}

.wrapper .sholes_btn.active .fas{
  transform: rotate(180deg);
}

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

background: #e4e4e4;

font-size: 14px;

line-height: 22px;

}

.wrapper{

width: 500px;

margin: 50px auto 0;

background: #fff;

padding: 30px 40px;

border-radius: 3px;

box-shadow: 1px 1px 2px rgba(0,0,0,0.125);

}

.wrapper .title{

font-weight: 700;

margin-bottom: 15px;

font-size: 25px;

text-align: center;

line-height: 25px;

}

.wrapper ul{

height: 70px;

overflow: hidden;

padding-left: 15px;

}

.wrapper ul.active{

height: auto;

}

.wrapper ul li{

margin-bottom: 5px;

list-style: none;

position: relative;

}

.wrapper ul li:before{

content: "";

position: absolute;

top: 8px;

left: -12px;

width: 5px;

height: 5px;

border-radius: 50%;

background: #bfbfbf;

}

.wrapper .sholes_btn{

margin-top: 15px;

font-weight: 700;

color: #ff406c;

cursor: pointer;

font-size: 15px;

}

.wrapper .sholes_btn.active .fas{

transform: rotate(180deg);

}

Dan langkah berikutnya yaitu menyisipkan script agar kita saat kita click button bisa menampilkan banyak content serta mengembalikan kembali seperti semula. Silahkan sahabat ketikkan script event click untuk load more dibawah ini

<script>
    	$(".sholes_btn").click(function(){
		$(this).toggleClass("active");
		$(".wrapper ul").toggleClass("active");
		  
		if($(".sholes_btn").hasClass("active")){
		   $(".sholes_text").text("Show Less");
		}else{
		   $(".sholes_text").text("Show More");
		  }
		});
    </script>

$(".sholes_btn").click(function(){

$(this).toggleClass("active");

$(".wrapper ul").toggleClass("active");

if($(".sholes_btn").hasClass("active")){

$(".sholes_text").text("Show Less");

}else{

$(".sholes_text").text("Show More");

}

});

</script>

saya kira cukup dalam pembahasan tentang Cara Membuat Load More Dengan HTML CSS dan jQuery, semoga dapat membantu sahabat dan selamat mencoba.

terima kasih

Cara Membuat Load More Dengan HTML CSS dan jQuery

Facebook DUMET School

Categories