Efek lain dari Collapsible di Materialize
Kemarin kita telah belajar mengenai apa itu collapsible, dan kita pun telah membahasnya dengan contoh pembuatannya, dan ternyata kita dapat mengedit efek yang kemarin itu menjadi lain, seandainya kemarin kita membuatnya ketika kita klik akan turun ke bawah efeknya, disini memang kita membuatnya tetap turun ke bawah, tetapi tak sejajar atau agak ke geser sedikit ke kiri, oke seandainya teman-teman telah tak sabar sesat lagi kita akan lanjut membangun efek lain dari collapsible di materialize. jangan kemana-mana ya teman-teman.
Kemarin ada yang tanya membangun efek seperti itu susah gak si mas, tak susah, Merancang efek collapsible gampang ko teman-teman, seperti halnya kita menggunakan bootstrap tinggal ambil-ambil saja, oke seketika saja kita masuk pada contoh pembuatannya, karena kemarin saya telah menjelaskan jadi kita seketika masuk saja efek lain dari collapsible di materialize, seandainya ada yang belum paham teman-teman dapat lihat artikel saya sebelumnya ya teman-teman.
<!DOCTYPE html>
<html>
<head>
<title>efek lain dari collapsible di materialize</title>
<!--Import Google Icon Font-->
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel=stylesheet>
<!--Import materialize.css-->
<link type=text/css rel=stylesheet href=css/materialize.min.css media=screen,projection/>
<!--Let browser know laman is optimized for mobile-->
<meta name=viewport content=width=device-width, initial-scale=1.0/>
<-e-style type=text/css>
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class=container>
<h1>efek lain dari collapsible di materialize</h1>
<ul class=collapsible popout data-collapsible=accordion>
<li>
<div class=collapsible-header><i class=material-icons>monetization_on</i>Mata uang</div>
<div class=collapsible-body><span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</span></div>
</li>
<li>
<div class=collapsible-header><i class=material-icons>local_atm</i>Kenapa Mesti ada mata uang</div>
<div class=collapsible-body><span>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, l</span></div>
</li>
<li>
<div class=collapsible-header><i class=material-icons>star</i>Mata uang apa yang terdapat di indonesia</div>
<div class=collapsible-body><span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</span></div>
</li>
</ul>
<p>
</p>
<!--Import jQuery before materialize.js-->
<-e-script type=text/javascript src=https://code.jquery.com/jquery-3.2.1.min.js></script>
<-e-script type=text/javascript src=js/materialize.min.js></script>
<-e- type=text/javascript>
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>
</div>
</body>
</html>
Sebetulnya disini saya tinggal menambah kan class popout di UL dimana dengan class itu kita dapat merubah efek yang standar menjadi seperti ini:
Bagaimana benar-benar menarik ya, dan saya rasa lumayan hingga disini dulu belajar kita mengenai efek lain dari collapsible di materialize, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
