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?

hope u have included required semantic js file, they have been adding classes programmatically only. — Mukesh, Apr 12 '14 at 16:21
oh, of course. What I don't know is the syntax to specify what to toggle between. — Huey, Apr 12 '14 at 16:22

score 17 · Accepted Answer · answered Apr 12 '14 at 16:26

17

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)
;

answered Apr 12 '14 at 16:26

Mukesh

858
1
10
21

14

Thanks, they should really document this properly, and make it more compact to specify all this. – Huey Apr 12 '14 at 16:50
3

Agreed, I was confused why it wasn't working either. Thanks for the example. – autonomy Oct 13 '14 at 19:40
Would be useful if you put up a jsfiddle or something similar to show this working as this does not work for me – user3574492 Mar 01 '15 at 17:58
3

@Huey, it is mostly one guy writing the Semantic-UI framework, take it easy, bro. Anyone can improve the docs, just fork the repo, edit, and make a pull request. – Eduardo Nov 23 '15 at 16:21
1

This will not work unless you also have `semantic = {};` somewhere. You'll get `ReferenceError: Can't find variable: semantic`. Why not include `semantic = {};`? – iconoclast Aug 17 '16 at 20:09

score 4 · Answer 2 · answered Mar 23 '16 at 15:55

4

The easiest way to get the toggle buttons working without any options etc is the following:

$('.ui.button.toggle').state();

This should toggle between the default grey and green colors on click. See the other answers for more complicated behaviour. Make sure the DOM etc is loaded first as with other semantic UI initializers.

answered Mar 23 '16 at 15:55

Greg

1,549
1
20
34

`` I had to include state js from semantic components - https://github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/state.js Alternatively use `state.min.js`. This seems to be the most suitable answer since it is using semantic API, rather than using non semantic code to achieve the same effect. – Sahil Singh May 08 '21 at 19:20

Grigory Ilizirov · Answer 3 · 2019-04-20T18:52:42.173

3

It is very simple,

<button class="ui toggle button active" id="tgl">Toogle button</button>

just use the classic jquery click to toogle the active class, and add any other changes you need. I think that using semantic stage is a waste of time in this case.

$('#tgl').click(function(){      
            $(this).toggleClass('active');
});

edited Apr 20 '19 at 18:52

answered Nov 04 '18 at 12:37

Grigory Ilizirov

1,030
1
8
26

score 2 · Answer 4 · answered Oct 04 '15 at 04:57

The following simple code is working fine for two different toggle buttons with onClick event. Thank you Mukesh for inspiring me.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="../../dist/semantic.css">
<script src="../assets/library/jquery.min.js"></script>
<script src="../../dist/semantic.js"></script>

</head>
<script>

function show(b){
alert( $(b).hasClass("active"));
}

// attach ready event
$(document)
  .ready(function() {
  var $toggle  = $('.ui.toggle.button');
  $toggle
    .state({
      text: {
        inactive : 'Vote',
        active   : 'Voted'
      }
    })
  ;

})
;
</script>
<body>

<button class="ui toggle button" onclick="show(this)">
  Vote
</button>
<br/><br/>
<button class="ui toggle button" onclick="show(this)">
  Vote
</button>


</body>
</html>

No, I just simplify the answer for whom may is looking for the same issue, as I had trouble with Mukesh answer, however it inspired me as I said :) — Mohammed Ali, Oct 04 '15 at 13:21

How to toggle content in Semantic UI buttons?

4 Answers4

Linked