Kemarin kita sudah belajar tentang apa itu collapsible, dan kita juga sudah membahasnya dengan contoh pembuatannya, dan ternyata kita bisa mengedit efek yang kemarin itu menjadi lain, jika kemarin kita membuatnya ketika kita klik akan turun ke bawah efeknya, disini memang kita membuatnya tetap turun ke bawah, tetapi tidak sejajar atau agak ke geser sedikit ke kiri, oke jika teman-teman sudah tidak sabar sesat lagi kita akan lanjut membuat efek lain dari collapsible di materialize. jangan kemana-mana ya teman-teman.
Kemarin ada yang tanya membuat efek seperti itu susah gak si mas, tidak susah, Membuat efek collapsible mudah ko teman-teman, seperti halnya kita menggunakan bootstrap tinggal ambil-ambil saja, oke langsung saja kita masuk dalam contoh pembuatannya, karena kemarin saya sudah menjelaskan jadi kita langsung masuk saja efek lain dari collapsible di materialize, jika ada yang belum paham teman-teman bisa 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 website 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 Harus 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 ada 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>
Sebenarnya disini saya tinggal menambah kan class popout di UL dimana dengan class itu kita bisa merubah efek yang standar menjadi seperti ini:
Bagaimana sangat menarik ya, dan saya rasa cukup sampai disini dulu belajar kita tentang efek lain dari collapsible di materialize, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Efek lain dari Collapsible di Materialize appeared first on Kursus Website Terbaik.