svallory/elephant.html

## 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>

## giraffe.html
<h2>Giraffe</h2>
<p>
  The giraffe is an African artiodactyl mammal, the tallest living terrestrial
  animal and the largest ruminant.
</p>

## 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>

## tiger.html
<h2>Tiger</h2>
<p>
  The tiger is the largest species among the Felidae and classified in the genus
  Panthera.
</p>
	<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>
	<h2>Giraffe</h2>
	<p>
	The giraffe is an African artiodactyl mammal, the tallest living terrestrial
	animal and the largest ruminant.
	</p>
	<!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>
	<h2>Tiger</h2>
	<p>
	The tiger is the largest species among the Felidae and classified in the genus
	Panthera.
	</p>