How to toggle content in Semantic UI buttons?

Asked 12/4, 2014 at 16:7 Answered 4/11, 2018 at 12:37

Solved jquery html css button semantic-ui

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?

Profant answered 12/4, 2014 at 16:7 Comment(2)

hope u have included required semantic js file, they have been adding classes programmatically only. – Danny 12/4, 2014 at 16:21

oh, of course. What I don't know is the syntax to specify what to toggle between. – Profant 12/4, 2014 at 16:22

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

Danny answered 12/4, 2014 at 16:26 Comment(5)

Thanks, they should really document this properly, and make it more compact to specify all this. – Profant 12/4, 2014 at 16:50

Agreed, I was confused why it wasn't working either. Thanks for the example. – Inchoation 13/10, 2014 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 – Winthorpe 1/3, 2015 at 17:58

@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. – Koziarz 23/11, 2015 at 16:21

This will not work unless you also have semantic = {}; somewhere. You'll get ReferenceError: Can't find variable: semantic. Why not include semantic = {};? – Spevek 17/8, 2016 at 20:9

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.

Hyphenate answered 23/3, 2016 at 15:55 Comment(1)

<script src="components/state.js"></script> I had to include state js from semantic components - github.com/Semantic-Org/Semantic-UI-CSS/blob/master/components/… 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. – Sidonius 8/5, 2021 at 19:20

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

Rory answered 4/11, 2018 at 12:37 Comment(0)

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>

Erb answered 4/10, 2015 at 4:57 Comment(1)

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 :) – Erb 4/10, 2015 at 13:21

Recommended topics

Hot tags