Cara Membuat Collapsible dengan Framework Materialize.css

Hallo teman-teman balik lagi dengan saya Ismet Maulana masih semangat yah mempelajari hal hal baru, kali ini saya akan memberikan pengetahuan tentang Bagaimana Cara Membuat Collapsible dengan Framework Materialize.css.

Oke langsung saja yah teman teman bisa salinkan script di bawah ini :

<head>
      <!--Import Google Icon Font-->
      <link href="http://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"/>

      <!-- JS -->

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

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

Body :

<ul class="collapsible" data-collapsible="accordion">
          <li>
            <div class="collapsible-header">
              <i class="material-icons">
                hearing
              </i>Work With Us
            </div>
            <div class="collapsible-body">
              <p>Kami adalah team kecil dengan visi misi yang sangat besar. Salah satu misi kami yaitu membantu semua orang di Indonesia untuk belajar kreatif dan inovatif dalam bidang IT, Online Bisnis dan Design.Sampai saat ini kami terus mencari orang-orang yang bersemangat, cerdas, menyenangkan, kreatif, dan inovatif yang akan kami jadikan Instruktur DUMET School untuk membantu kami dalam mencapai misi tersebut. Jika anda tertarik dengan tawaran ini, silahkan mendaftarkan diri dengan mengirimkan data diri ke <a href="http://www.dumetschool.com/mailto:info@dumetschool.com">info[ at ]dumetschool.com</a></p>
            </div>
          </li>
          <li>
            <div class="collapsible-header">
              <i class="material-icons">
                location_on
              </i>Lokasi Kami
            </div>
            <div class="collapsible-body">
              <h3>DUMET School Kelapa Gading</h3>
              <p>Rukan Artha Gading Niaga Blok i - 23, Jalan Boulevard Artha Gading <br />
              (Belakang Mall Artha Gading) <br />
              Telp: (021) 4585-0387</p>

              <h3>DUMET School Srengseng</h3>
              <p>Ruko Permata Regensi Blok B - 18, Jalan Haji Kelik <br />
              Srengseng, Kebon Jeruk, Jakarta Barat 11630 <br />
              (Depan Hutan Kota Srengseng)<br/>
              Telp: (021) 5890-8355</p>

              <h3>DUMET School Grogol</h3>
              <p>Ruko Jalan Taman Daan Mogot Raya No. 23 <br />
              Kel. Tanjung Duren Utara Kec. Grogol Petamburan, Jakarta Barat 11470 <br />
              (Belakang Mall Citraland dan Kampus UNTAR II)<br />
              Telp: (021) 2941-1188</p>

              <h3>DUMET School Depok</h3>
              <p>Ruko Jalan Kartini Raya No. 53 <br />
              Pancoran Mas, Depok 16436 <br />
              (± 5 Menit dari Kantor Walikota Depok)<br />
              Telp: (021) 7720-7657</p>
            </div>
          </li>
        </ul>

Jika Sudah Kalian save dan jalankan dibrowser kalian, Cukup mudah bukan ?segala sesuatu yang kita kerjakan akan terasa lebih mudah jika ada niat yang tulus, oke sampai disini pembahasan tentang Bagaimana Cara Membuat Collapsible dengan Framework Materialize.css, Sekian Tutorial dari saya Terimakasih. Selamat Mencoba !

#KeepLearn

#IsmetMA