Skip to content

Instantly share code, notes, and snippets.

@luisenriquecorona

luisenriquecorona/Client Side.html

Created April 8, 2019 23:43
Show Gist options
  • Save luisenriquecorona/54ac706c294dea44e20a16f9ae5ed847 to your computer and use it in GitHub Desktop.
Save luisenriquecorona/54ac706c294dea44e20a16f9ae5ed847 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Client Side.html
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS styles for this page */
.reveal * { display: none; } /* Children of class="reveal" are not shown */
.reveal *.handle { display: block;} /* Except for the class="handle" child */
</style>
<script>
// Don't do anything until the entire document has loaded
window.onload = function() {
// Find all container elements with class "reveal"
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) { // For each one...
var elt = elements[i];
// Find the "handle" element with the container
var title = elt.getElementsByClassName("handle")[0];
// When that element is clicked, reveal the rest of the content
title.onclick = function() {
if (elt.className == "reveal") elt.className = "revealed";
else if (elt.className == "revealed") elt.className = "reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Click Here to Reveal Hidden Text</h1>
<p>This paragraph is hidden. It appears when you click on the title.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment