Mengenal Element Details dan Summary pada HTML 5.1

Pada tutorial kali ini anda akan mengenal element details dan summary pada html 5.1 beserta cara menggunakannya.

Hallo semuanya kembali lagi pad artikel dumet school , mumpung masih belum banyak di bahas saya akan membahas tentang HTML 5.1 dan salah satu fitur terbarunya.

kali ini saya akan membahas mengenal element details dan summary pada html 5.1 dan bagaimana cara menggunakannya.

Apa fungsi dari element terbaru details dan summary ini ?  fungsinya adalah untuk menampilkan dan menyembunyikan sebuah block yang berisi sebuah informasi atau aditional paragraf dengan menggunakan event click tanpa menggunakan javascript.

penasaran ? salin code berikut 🙂 :

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
	body {
  font-family: 'Roboto';
  color: #333;
  font-size: 1.1em;
}

section {
  max-width: 500px;
}

details {
  background: #f0f0f0;
  padding: 20px;
  margin-bottom: 5px;
}

summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
}
   </style>
</head>
<body>



<section>
  <h2>Red panda</h2>
  <p>
    The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
  </p>
  <details>
    <summary>
      Distribution and habitat
    </summary>
    <p>
    The red panda is endemic to the temperate forests of the Himalayas, and ranges from the foothills of western Nepal to China in the east. Its easternmost limit is the Qinling Mountains of the Shaanxi Province in China. Its range includes southern Tibet, Sikkim and Assam in India, Bhutan, the northern mountains of Burma, and in south-western China, in the Hengduan Mountains of Sichuan and the Gongshan Mountains in Yunnan.
    </p>
  </details>
  <details>
    <summary>
      Curious facts
    </summary>
    <p>
    The red panda's local names differ from place to place. The Lepcha people call it sak nam. In Nepal, the species is called bhalu biralo (bear-cat) and habre.
    </p>
    <p>
  The red panda was recognized as the state animal of Sikkim in the early 1990s, and was the mascot of the Darjeeling Tea Festival.
    </p>
  </details>
</section>



</body>
</html>

setelah kalian salin maka hasilnya akan seperti ini :

lalu setelah jadi seperti di atas , silahkan di klik pada toggle “Distribution and habitat” maka akan menampilkan sub informasi di bawahnya seperti ini :

oke sekarang di HTML 5.1 akan lebih muda membuat hal yang seperti itu tanpa menggunakan javascript 🙂

baiklah sampai di sini dulu tutorial tentang mengenal element details dan summary pada html 5.1, sampai bertemu pada artikel selanjutnya.