{"id":8155,"date":"2015-11-28T07:08:22","date_gmt":"2015-11-28T07:08:22","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/how-to-toggle-content-in-semantic-ui-buttons-open-source-projects-semantic-org-semantic-ui\/"},"modified":"2022-08-30T15:42:25","modified_gmt":"2022-08-30T15:42:25","slug":"how-to-toggle-content-in-semantic-ui-buttons-open-source-projects-semantic-org-semantic-ui","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/how-to-toggle-content-in-semantic-ui-buttons-open-source-projects-semantic-org-semantic-ui\/","title":{"rendered":"How to toggle content in Semantic UI buttons?-open source projects Semantic-Org\/Semantic-UI"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/BkB7r.jpg?s=128&amp;g=1\" \/> <strong>Mukesh<\/strong><\/p>\n<p>The below code is doing the magic:<\/p>\n<pre><code>semantic.button = {};\n\n\/\/ ready event\nsemantic.button.ready = function() {\n\n  \/\/ selector cache\n  var\n    $buttons = $('.ui.buttons .button'),\n    $toggle  = $('.main .ui.toggle.button'),\n    $button  = $('.ui.button').not($buttons).not($toggle),\n    \/\/ alias\n    handler = {\n\n      activate: function() {\n        $(this)\n          .addClass('active')\n          .siblings()\n          .removeClass('active')\n        ;\n      }\n\n    }\n  ;\n\n  $buttons\n    .on('click', handler.activate)\n  ;\n\n\n  $toggle\n    .state({\n      text: {\n        inactive : 'Vote',\n        active   : 'Voted'\n      }\n    })\n  ;\n\n};\n\n\n\/\/ attach ready event\n$(document)\n  .ready(semantic.button.ready)\n;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Mukesh The below code is doing the magic: semantic.button = {}; \/\/ ready event semantic.button.ready = function() { \/\/ selector cache var $buttons = $(&#8216;.ui.buttons .button&#8217;), $toggle = $(&#8216;.main .ui.toggle.button&#8217;), $button = $(&#8216;.ui.button&#8217;).not($buttons).not($toggle), \/\/ alias handler = { activate: function() { $(this) .addClass(&#8216;active&#8217;) .siblings() .removeClass(&#8216;active&#8217;) ; } } ; $buttons .on(&#8216;click&#8217;, handler.activate) ; $toggle .state({ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1],"tags":[],"class_list":["post-8155","post","type-post","status-publish","format-standard","hentry","category-semantic","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8155"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8155\/revisions"}],"predecessor-version":[{"id":8575,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8155\/revisions\/8575"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}