Adaptive Pagebrowser

Dynamic HTML based JS Pagebrowser

by Jaydot

HTML

<html>
<head>

</head>
<body>
<div class="main">
<div id="name-of-page-one" class="subpage-content active">
<p>
Content Page 1
</p>
</div>
<div id="page-two-is-cool" class="subpage-content">
<p>
Content Page 2
</p>
</div>
<div id="nickname-of-page-three" class="subpage-content">
<p>
Content Page 3
</p>
</div>
<div class="pageoverview">
<ul>
<li><a class="subpage-toggle" href="#name-of-page-one">Name of page one</a></li>
<li><a class="subpage-toggle" href="#page-two-is-cool">Page two is cool</a></li>
<li><a class="subpage-toggle" href="#nickname-of-page-three">Nickname of page three</a></li>
</ul>
<a class="subpage-toggle" href="#show-all">Show all</a>
</div>
</div>
</body>
</html>

CSS

.subpage-toggle {
  display: block;
}

.subpage-content {
  display: none;
}

.subpage-content.active {
  display: block;
}

JavaScript

window.onload = function () {
	var pagelinks = document.querySelectorAll("a.subpage-toggle");

	for (var i = 0; i < pagelinks.length; i++) {
		pagelinks[i].onclick = function () {
			// Finding all elements of class 'active' (creates an array of results)
			let x = document.getElementsByClassName("active");
			// If class 'active' exists, remove it.
			if (x.length > 0) {
				x[0].classList.remove("active");
			}
			if ((this.href.split("#")[1]) !== "show-all") {
				// add class 'active' if ID matches href of link
				document.querySelector("#" + this.href.split("#")[1]).classList.add("active");
			} else {
				var subpagecontents = document.getElementsByClassName("subpage-content"),
						len = subpagecontents !== null ? subpagecontents.length : 0,
						j = 0;
				for (j; j < len; j++) {
					subpagecontents[j].classList.add("active");
				}
			}
		};
	}
};