kickoff-code-toggle

A very basic way to toggle code examples. Used on the trykickoff.com site

All classnames are configurable in the options when kickoff-code-toggle is initialised.

Installation

npm install --save kickoff-code-toggle

Usage:

Javascript

var toggleCode = require('kickoff-code-toggle');

toggleCode({
	headings: '.sg-demoHeading',
	showCodeEl: 'sg-demoHeading-showCodeBtn',
	showCodeBtnText: '❮/❯',
	codeContainerEl: 'show-code',
	activeClass: 'is-active',
});

HTML markup

<h2 class="sg-sectionHeading sg-demoHeading">Demo 1</h2>
<div class="sg-demo">
	
	<h1>This is a piece of demo code</h1>

	<div class="sg-demo-code">

<pre><h1>This is a piece of demo code</h1></pre>

	</div>
</div>

CSS

.sg-demo-code {
	display: none;
}

.sg-demo.show-code .sg-demo-code {
	display: block;
}

Build the code

Build relies on Browserify

npm run build

Test the code

npm test

Then open your browser at http://localhost:8000

Made by Z&er :zap: