Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
Last active August 26, 2023 02:21
Show Gist options
  • Save cferdinandi/32b0aebaab862a7a3a2580769349d8fe to your computer and use it in GitHub Desktop.
Save cferdinandi/32b0aebaab862a7a3a2580769349d8fe to your computer and use it in GitHub Desktop.
Learn the basics of vanilla JavaScript is about 10 minutes. Watch the video at https://www.youtube.com/watch?v=IQn_up6ZUkk, and grab more vanilla JS resources at https://gomakethings.com.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn Vanilla JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 112.5%;
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
.accordion {
display: none;
}
.accordion.active {
display: block;
}
</style>
</head>
<body>
<h1>Simple Accordion Script - Completed</h1>
<p><a class="accordion-toggle" href="#content-1">Show More 1</a></p>
<div class="accordion" id="content-1">
<h2>Anchor's Away!</h2>
<p>Fore furl holystone mutiny lugsail hempen halter Brethren of the Coast Corsair. Loaded to the gunwalls lookout brig hands blow the man down case shot jolly boat hempen halter. Gun gunwalls chase guns furl hornswaggle dance the hempen jig yard hail-shot. Pressgang quarterdeck prow lugger spanker fluke broadside reef.</p>
<p>Hempen halter me gangplank snow smartly boom fire ship aft. Rope's end draught interloper schooner ho wench jury mast lateen sail. Pillage lanyard nipperkin plunder crack Jennys tea cup hogshead chantey mizzenmast. Spanker blow the man down Buccaneer Sail ho rum tender warp brigantine.</p>
</div>
<p><a class="accordion-toggle" href="#content-2">Show More 2</a></p>
<div class="accordion" id="content-2">
<h2>Man O' War</h2>
<p>Man-of-war booty brigantine fire ship tack no prey, no pay wherry lee. Reef heave to line chandler fore cable smartly me. Avast list spanker Arr fathom American Main lookout grapple. Jolly boat black spot chandler list chantey pinnace brig Yellow Jack.</p>
<p>Chantey Davy Jones' Locker snow jib careen galleon Admiral of the Black lass. Rum booty heave to grog hempen halter gangway long clothes wherry. Mutiny chase Sea Legs grapple crow's nest wherry jury mast lateen sail. Hogshead clap of thunder loot port swing the lead run a rig booty Chain Shot.</p>
</div>
<p><a class="accordion-toggle" href="#content-3">Show More 3</a></p>
<div class="accordion" id="content-3">
<h2>Corsair</h2>
<p>Line Corsair haul wind pink provost hardtack keelhaul hang the jib. Splice the main brace matey hornswaggle strike colors run a shot across the bow cackle fruit hang the jib jack. Sheet bounty wherry nipperkin belay flogging Chain Shot main sheet. Lad Spanish Main barque port smartly Chain Shot deadlights Jack Ketch.</p>
<p>Flogging heave down sloop me squiffy barkadeer loot chantey. Ye spike port lugsail belaying pin nipperkin loot yardarm. Prow gangplank six pounders chase guns pressgang chandler Shiver me timbers piracy. Hearties Shiver me timbers sloop driver fire in the hole gaff prow gally.</p>
</div>
<!-- Scripts -->
<script>
/**
* Simple expand/collapse
*/
// document.addEventListener('click', function (event) {
// // Only run if the clicked link was an accordion toggle
// if ( !event.target.classList.contains('accordion-toggle') ) return;
// // Get the target content
// var content = document.querySelector(event.target.hash);
// if ( !content ) return;
// // Prevent default link behavior
// event.preventDefault();
// // Expand/collapse the content area
// content.classList.toggle('active');
// }, false);
/**
* Accordion functionality
*/
// Add your JavaScript here...
document.addEventListener('click', function (event) {
// Only run if the clicked link was an accordion toggle
if ( !event.target.classList.contains('accordion-toggle') ) return;
// Get the target content
var content = document.querySelector(event.target.hash);
if ( !content ) return;
// Prevent default link behavior
event.preventDefault();
// If the content is already expanded, collapse it and quit
if ( content.classList.contains('active') ) {
content.classList.remove('active');
return;
}
// Get all accordion content, loop through it, and close it
var accordions = document.querySelectorAll('.accordion');
for (var i = 0; i < accordions.length; i++) {
accordions[i].classList.remove('active');
}
// Open our target content area
content.classList.add('active');
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn Vanilla JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 112.5%;
margin-left: auto;
margin-right: auto;
max-width: 40em;
width: 88%;
}
</style>
</head>
<body>
<h1>Simple Accordion Script</h1>
<p><a class="accordion-toggle" href="#content-1">Show More 1</a></p>
<div class="accordion" id="content-1">
<h2>Anchor's Away!</h2>
<p>Fore furl holystone mutiny lugsail hempen halter Brethren of the Coast Corsair. Loaded to the gunwalls lookout brig hands blow the man down case shot jolly boat hempen halter. Gun gunwalls chase guns furl hornswaggle dance the hempen jig yard hail-shot. Pressgang quarterdeck prow lugger spanker fluke broadside reef.</p>
<p>Hempen halter me gangplank snow smartly boom fire ship aft. Rope's end draught interloper schooner ho wench jury mast lateen sail. Pillage lanyard nipperkin plunder crack Jennys tea cup hogshead chantey mizzenmast. Spanker blow the man down Buccaneer Sail ho rum tender warp brigantine.</p>
</div>
<p><a class="accordion-toggle" href="#content-2">Show More 2</a></p>
<div class="accordion" id="content-2">
<h2>Man O' War</h2>
<p>Man-of-war booty brigantine fire ship tack no prey, no pay wherry lee. Reef heave to line chandler fore cable smartly me. Avast list spanker Arr fathom American Main lookout grapple. Jolly boat black spot chandler list chantey pinnace brig Yellow Jack.</p>
<p>Chantey Davy Jones' Locker snow jib careen galleon Admiral of the Black lass. Rum booty heave to grog hempen halter gangway long clothes wherry. Mutiny chase Sea Legs grapple crow's nest wherry jury mast lateen sail. Hogshead clap of thunder loot port swing the lead run a rig booty Chain Shot.</p>
</div>
<p><a class="accordion-toggle" href="#content-3">Show More 3</a></p>
<div class="accordion" id="content-3">
<h2>Corsair</h2>
<p>Line Corsair haul wind pink provost hardtack keelhaul hang the jib. Splice the main brace matey hornswaggle strike colors run a shot across the bow cackle fruit hang the jib jack. Sheet bounty wherry nipperkin belay flogging Chain Shot main sheet. Lad Spanish Main barque port smartly Chain Shot deadlights Jack Ketch.</p>
<p>Flogging heave down sloop me squiffy barkadeer loot chantey. Ye spike port lugsail belaying pin nipperkin loot yardarm. Prow gangplank six pounders chase guns pressgang chandler Shiver me timbers piracy. Hearties Shiver me timbers sloop driver fire in the hole gaff prow gally.</p>
</div>
<!-- Scripts -->
<script>
// Add your JavaScript here...
</script>
</body>
</html>
@githubxiansaiful
Copy link

af

@havilah-dalalord
Copy link

Awesome. Can you tutor me on Vanilla Javascript ?

@cferdinandi
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment