Fungsi Class Expandable di Collapsible Materialize

Pada artikel sebelumnya mengenai collapsible di materialize, kita telah belajar dan membahas tentan apa itu collapsible, dan bagaimana cara membuatnya, oke mungkin dari teman-teman baru saja bergabung maka dari itu disini saya akan coba menerangkan sedikit tentang collapsible, collapsible jika saya artikan adalah ketika judul kita klik maka deskripsinya akan terbuka kebawah, jadi akan sedikit rapi, oke kembali lagi ke pokok pemabahasan fungsi class expandable di collapsible materialize, dan sepertinya sudah cukup Panjang mari kita bahas pada artikel selanjutnya.

Read more.

Seperti yang saya tulis di atas fungsi class expandable di collapsible materialize, hampir mirip dengan ketika kita membuat sebuah menu dropdown, ketika di klik maka akan turun kebawah, tapi bedanya jika menu dropdown yang akan tampil adalah menu-menu selanjutnnya benar ya, jika ini tentunya penjelasan atau deskripsi. Expandable bedanya jika kita berikan expandable efek yang di berikan adalah ketika di klik judulnya deskripsi akan keluar dan ketika kita klik lagi judul sebelahnya maka akan keluar tetapi judul dan deskripsi sebelumnnya tidak akan tertutup, jika teman-teman mengikuti artikel collapsible sebelumnya ketika kita klik maka judul sebelumnnya akan tertutup tetapi kalau ini tidak ya teman-teman.

Oke maka dari itu kita langsung akan dalam langkah pembuatnya, oiya saya harap teman sudah bisa menggunakan materialize ya, dari cara download sampai menempel struktur-struktur kodenya, jadi kita langsung masuk dalam proses penginputan kodenya seperti apa seperti ini:

<!DOCTYPE html>

  <html>

    <head>

    <title>Fungsi Class Expandable di Collapsible 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"/>

      <style type="text/css">

               .container{

                               width: 900px;

                               margin: auto;

               }

      </style>

    </head>


    <body>

    <div class="container">

    <h1>Fungsi Class Expandable di Collapsible Materialize </h1>

                    <ul class="collapsible" data-collapsible="expandable">

                                    <li>

                                      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>

                                      <div class="collapsible-body"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s</span></div>

                                    </li>

                                    <li>

                                      <div class="collapsible-header"><i class="material-icons">place</i>Second</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, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,</span></div>

                                    </li>

                                    <li>

                                      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>

                                      <div class="collapsible-body"><span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</span></div>

                                    </li>

                                  </ul>

                  </div>

      <!--Import jQuery before materialize.js-->

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

      <script type="text/javascript" src="js/materialize.min.js"></script>

      <script type="text/javascript">

                 $(document).ready(function(){

                                    $('.collapsible').collapsible();

                                  });

      </script>


    </body>

  </html>

Cukup Panjang ya, jadi class expandable, kita akan berikan pada tag UL sekarang kita lihat hasilnya:

Bagaimana keren ya teman-teman dan saya rasa cukup sampai disini dulu belajar kita tentang fungsi class expandable di collapsible materialize, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.