ToggleControls Demo

Toggle (w/ defaults)

    <button class='js-toggle'>Toggle (w/ defaults)</button>

    <div class='tc-dialog is-hidden dialog'>
      Hello. This is a dialog.
    <i class='js-toggle fa fa-times fa-lg'></i>
    </div>

Try:

Hello. This is a dialog.

Toggle button (w/ nested icons)

    <button class='js-toggle' data-togglecontrols='{"selector":".tc-dialog1"}'>
    Toggle (nested icons)
    <i class='fa fa-star fa-lg'></i>
    <span> <i class='fa fa-times fa-lg'></i> </span>
    </button>
    <div class='tc-dialog1 dialog is-hidden'>Dialog1 with some text.</div>

Try:

Dialog1 with some text.

Active Toggle icon (via font-awesome)

    <i class='js-toggle fa fa-toggle-off fa-2x'
    data-togglecontrols='{"selector":".tc-dialog2","activeTarget":true, "targetActiveClass":"fa-toggle-on fa-toggle-off"}'>
    </i>
    <div class='tc-dialog2 dialog is-hidden'>Dialog2 with some text.</div>

Try:

Dialog2 with some text.

Highlight with active toggle

Try:

Content Panel with some text.