How to toggle content in Semantic UI buttons?

Question

The documentation says a button can be formatted to toggle on or off, but the example given is merely

<div class="ui toggle button">     Vote </div> 

which naturally, doesn't work. An inspection of the source code of the example reveals an active class is programmatically added.

I'm probably missing something simple, but how can I create a toggle button like in that example? What's the syntax for specifying what to toggle between?

Answer 1

The below code is doing the magic:

semantic.button = {};  // ready event semantic.button.ready = function() {    // selector cache   var     $buttons = $('.ui.buttons .button'),     $toggle  = $('.main .ui.toggle.button'),     $button  = $('.ui.button').not($buttons).not($toggle),     // alias     handler = {        activate: function() {         $(this)           .addClass('active')           .siblings()           .removeClass('active')         ;       }      }   ;    $buttons     .on('click', handler.activate)   ;     $toggle     .state({       text: {         inactive : 'Vote',         active   : 'Voted'       }     })   ;  };   // attach ready event $(document)   .ready(semantic.button.ready) ;