Mengenal Element Details dan Summary pada HTML 5.1
Di panduan kali ini kamu akan mengenal element details dan summary di html 5.1 dan juga cara menggunakannya.
Hallo semuanya kembali lagi pad artikel Source Code Aplikasi , mumpung masih belum banyak di bahas saya akan membahas mengenai HTML 5.1 dan diantara fitur terbarunya.
kali ini saya akan membahas mengenal element details dan summary di html 5.1 dan bagaimana cara menggunakannya.
Apa guna dari element terbaru details dan summary ini ? fungsinya ialah bagi 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 karenanya hasilnya akan seperti ini :
lalu setelah jadi seperti di atas , silahkan di klik di toggle “Distribution and habitat” karenanya akan menampilkan sub informasi di bawahnya seperti ini :
oke kini di HTML 5.1 akan lebih muda merancang hal yang seperti itu tanpa menggunakan javascript 🙂
baiklah hingga di sini dulu panduan mengenai mengenal element details dan summary di html 5.1, hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
