kickoff-code-toggle

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i kickoff-code-toggle

Weekly Downloads

0

Version

1.0.0

License

MIT

Last publish

Collaborators

  • mrmartineau