Package Exports

kickoff-code-toggle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kickoff-code-toggle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 ⚡