Skip to content

Instantly share code, notes, and snippets.

@svallory

svallory/elephant.html

Last active February 24, 2024 05:00
Show Gist options
  • Save svallory/1e4a962ca3ca1780e4ae509d58d98d32 to your computer and use it in GitHub Desktop.
Save svallory/1e4a962ca3ca1780e4ae509d58d98d32 to your computer and use it in GitHub Desktop.
Download ZIP
portal > htmz > htmx (LOL just kidding)
Raw
elephant.html
<h2>Elephant</h2>
<p>
Elephants are the largest existing land animals. Three species are currently
recognized: the African bush elephant, the African forest elephant, and the
Asian elephant.
</p>
Raw
giraffe.html
<h2>Giraffe</h2>
<p>
The giraffe is an African artiodactyl mammal, the tallest living terrestrial
animal and the largest ruminant.
</p>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animal Information Tabs</title>
</head>
<body>
<div>
<a href="tiger.html" target="#info-panel">Tiger</a>
<a href="elephant.html" target="#info-panel">Elephant</a>
<a href="giraffe.html" target="#info-panel">Giraffe</a>
</div>
<div id="info-panel" class="tab-content"></div>
<script>
// ===>[portal]>
// Links whose `target` attribute start with `#`
// will have the content of the page they link fetched
// and loaded into the element with the id specified in the `target` attribute
// 240 bytes (not counting spaces)
const p = (l) =>
fetch(l.href)
.then((r) => r.text())
.then(
(h) => (document.getElementById(l.target.slice(1)).innerHTML = h)
) && false;
document.addEventListener("DOMContentLoaded", () =>
document
.querySelectorAll('a[target^="#"]')
.forEach((a) => (a.onclick = () => p(a)))
);
</script>
</body>
</html>
Raw
tiger.html
<h2>Tiger</h2>
<p>
The tiger is the largest species among the Felidae and classified in the genus
Panthera.
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment