<html>
<head>
<title>Abakada HTML Demo: summary and details Elements</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style>
details {
font: 14pt Calibri, sans-serif;
margin: 0 30;
background-color: #eee;
box-shadow: -4px 4px 4px gray;
}
details.reveal:open {
animation: reveal 0.8s;
}
details > summary {
background-color: #ddc;
font-weight: bold; padding: 10px;
cursor: pointer;
}
details:open > summary {
background-color: lightsteelblue;
animation: sweep 0.8s;
}
details div {
margin: 0 30 0 30; padding: 10px;
}
details ul {
margin: 0 50; padding: 16px;
}
td > img {
display:block; margin:0 auto;
}
@keyframes sweep {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes reveal {
0% {
opacity: 0;
max-height: 0;
}
100% {
opacity: 1;
max-height: 100%;
}
}
</style>
</head>
<body>
<div class="header"><h2>Abakada HTML Demo: <b>summary and details</b> Elements</h2></div>
<!-- #include virtual="~/shared/viewsrc_top.inc" -->
<hr size=1 width=92%>
<section style="margin: 0 40">
<h1>Product Specs</h1>
<details name=specs class=reveal>
<summary>Product Name</summary>
<div>Naturehike 24-Liters Insulated Ice Chest / Cooler Box</div>
</details>
<details name=specs class=reveal>
<summary>Category</summary>
<div>Camping >> Camp Kitchen</div>
</details>
<details name=specs class=reveal>
<summary>Preview</summary>
<center><table>
<tr>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 1.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 2.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 3.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 4.jpg" height=200></td>
</tr>
<tr>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 5.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 6.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 7.jpg" height=200></td>
<td><img src="http://ogre.ph/shared/images/brands/Naturehike/NH20SJ021-24L 8.jpg" height=200></td>
</tr>
</table>
</center>
</details>
<details name=specs class=reveal>
<summary>Description</summary>
<section style="margin: 0 20">
<p><b>Item NH20SJ021 24-Liters Insulated Ice Chest / Cooler Box from Naturehike</b></p>
<p>Insulated cooler chest suitable while out camping and or traveling with family and friends.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/ce98ad81720f947f8b5b4b88aef7b3d1.jpg" border="0" alt=""></div>
<p>Multi-purpose, its 24-liter capacity can be used for keeping food fresh, and for storing beverages, cold or warm.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/13c2d172717b455f7b38cc275a5fe68f.jpg" border="0" alt=""></div>
<p>Features EPS foam insulation layer that can keep the cold from 12 up to 24 hours max.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/41c728481a893b07897733af9e162eb2.jpg" border="0" alt=""></div>
<p>Tough handle conveniently serves as a lock while in transport or storage.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/df8fdb7deb79d3df178ce3c1df159dc9.jpg" border="0" alt=""></div>
<div align="center"><img src="https://ph-live-01.slatic.net/p/062d3379027079bb599c605a82b920be.jpg" border="0" alt=""></div>
<p>The cover can be used as a mini table top, its underside replete with moulded holders for cups, cans or bottles.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/770fb85dc4512d6fbb6233305c1aa465.jpg" border="0" alt=""></div>
<p>Made from eco-friendly, non-toxic and food safe materials.</p>
<div align="center"><img src="https://ph-live-01.slatic.net/p/c45cda1225ee131801d45188d48be6c8.jpg" border="0" alt=""></div>
</section>
</details>
<details name=specs class=reveal>
<summary>Features and Specifications</summary>
<ul>
<li>Capacity (volume): 24L</li>
<li>Outer dimensions (W x D x H): 44 * 26 * 40cm</li>
<li>Inner dimensions (W x D x H): 36.5 * 21.5 * 31cm</li>
<li>Outer wall and cover: PE</li>
<li>Inner wall and handle: PP</li>
<li>Insulation layer: EPS foam</li>
<li>Capacity (items): ≈ 30pcs 380ml bottles</li>
<li>Includes 15pcs ice packs</li>
<li>Weight: 2.8kg</li>
</ul>
</details>
<details name=specs class=reveal>
<summary>Shipping Info</summary>
<ul>
<li>Item Weight: 3.40 kg</li>
<li>Package Length: 45.00 cm</li>
<li>Package Width: 41.00 cm</li>
<li>Package Height: 27.00 cm</li>
<li>Dimension Weight: 14.23 kg</li>
</ul>
</details>
<details name=specs class=reveal>
<summary>Buy Link</summary>
<div><a href="https://www.lazada.com.ph/i1090392597.html" target="_blank">Naturehike 24-Liters Insulated Ice Chest / Cooler Box</a></div>
</details>
</section>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
<script>
const reveal = document.querySelector( ".reveal" );
reveal.addEventListener ( "animationend", ( event ) => {
location.href=location.href;
}
</script>
</html>