Postingan lainnya
button loadmore php codeigniter
ada yang punya referensi untuk membuat button loadmore menggunakan jquery dan codeigniter tetapi yang pakai bahasa indonesia heheheh
0
1 Jawaban:
saya belum pakai codeigniter sehingga untuk menghasilkan tombol "Load More" saya selalu hanya gado-gado-kan html, css, javascript (jquery)
coba copy paste code berikut di notepad dan di simpan sebagai html atau php dan lihat hasilnya, semoga tombol 'load more' seperti itu yang di butuhkan>
<!DOCTYPE html>
<html>
<head>
<!-- Vik Sintus Projects vik.sintus@gmail.com -->
<title>Tombol Read More </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
#tulisan{
display:none;
}
.kotakUtkTombol{
margin: auto;
height:44px;
width:166.23px;
}
a:active{
color:#ffd323;
}
body{
font-family:'Raleway',monospace;
font-size:20px;
margin:30px;
}`
tombolnya{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
cursor:pointer;
border:none;
padding:8px;
font-size:20px;
background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
color:white;
font-family:cursive;
box-sizing:border-box;
}
</style>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
var tulisanSelengkapnya = $("#toggle").text();
if (tulisanSelengkapnya == "Read More") {
//yang di lakukan ketika tombol dalam keadaan Read More
$("#toggle").text("Read Less");
$("#tulisan").slideDown();
} else {
//yang di lakukan ketika tombol dalam keadaan Read Less
$("#toggle").text("Read More");
$("#tulisan").slideUp();
}
});
});
</script>
</head>
<body>
<div>
<h1 align="center">Apa Itu Read More?</h1>
<p>Imperdiet lectus quis justo. Aliquam erat volutpat. Vivamus luctus egestas leo. Aliquam erat volutpat. Curabitur bibendum justo non orci. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Pellentesque arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec iaculis gravida nulla. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean fermentum risus id tortor. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nullam dapibus fermentum ipsum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam sit amet magna in magna gravida vehicula. In convallis. Integer pellentesque quam vel velit.</p> </div>
<br>
<div>
<span id="tulisan">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce suscipit libero eget elit. Donec vitae arcu. Pellentesque sapien. Pellentesque ipsum. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Nullam rhoncus aliquam metus. Nam sed tellus id magna elementum tincidunt. Vivamus ac leo pretium faucibus. Nullam dapibus fermentum ipsum. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Duis risus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Vivamus luctus egestas leo.
Integer imperdiet lectus quis justo. Aliquam erat volutpat. Vivamus luctus egestas leo. Aliquam erat volutpat. Curabitur bibendum justo non orci. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Pellentesque arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec iaculis gravida nulla. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Aenean fermentum risus id tortor. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Nullam dapibus fermentum ipsum. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam sit amet magna in magna gravida vehicula. In convallis. Integer pellentesque quam vel velit.
Etiam quis quam. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Integer in sapien. Curabitur bibendum justo non orci. Donec quis nibh at felis congue commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Aenean id metus id velit ullamcorper pulvinar. Nulla pulvinar eleifend sem. Sed convallis magna eu sem. Duis risus. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Proin in tellus sit amet nibh dignissim sagittis.</span>
<div class="kotakUtkTombol">
<button id="toggle">Read More</button>
</div>
</body>
</html>
0
