Skip to content

Instantly share code, notes, and snippets.

@finreinhard

finreinhard/jQuery.html

Last active April 11, 2018 13:23
Show Gist options
  • Save finreinhard/8787f0ab694af4fb9b8d7d7f413a5b2b to your computer and use it in GitHub Desktop.
Save finreinhard/8787f0ab694af4fb9b8d7d7f413a5b2b to your computer and use it in GitHub Desktop.
Download ZIP
Switch content with javascript
Raw
jQuery.html
<html>
<head>
<title>Playground</title>
<style>
.hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
</head>
<body>
<div id='contentA'>
<h1>Willkommen A</h1>
<p>Lorem Ipsum</p>
<a href='#test' onclick="return openB()">Content B</a>
</div>
<div id='contentB' class='hidden'>
<h1>Willkommen B</h1>
<p>Lorem Ipsum, B</p>
<a href='#test' onclick="return openA()">Content A</a>
</div>
<script>
function openB() {
$('#contentA').addClass('hidden');
$('#contentB').removeClass('hidden');
return false;
}
function openA() {
$('#contentB').addClass('hidden');
$('#contentA').removeClass('hidden');
return false;
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</body>
</html>
Raw
pure.html
<html>
<head>
<title>Playground</title>
<style>
.hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
</style>
</head>
<body>
<div id='contentA'>
<h1>Willkommen A</h1>
<p>Lorem Ipsum</p>
<a href='#test' onclick="return openB()">Content B</a>
</div>
<div id='contentB' class='hidden'>
<h1>Willkommen B</h1>
<p>Lorem Ipsum, B</p>
<a href='#test' onclick="return openA()">Content A</a>
</div>
<script>
function openB() {
$('#contentA').classList.add('hidden');
$('#contentB').classList.remove('hidden');
return false;
}
function openA() {
$('#contentB').classList.add('hidden');
$('#contentA').classList.remove('hidden');
return false;
}
$ = function(selector) {
return document.querySelector(selector);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment