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 ⚡️