syntax for jQuery css button selector

  • 1
  • Question
  • Updated 4 months ago
  • Answered
I created this codepen to update a current css class with an update css class by means of a toggle. However, when I try setting this up in our skuid environment, nothing happens when I click the button. 

No errors show up in the counsel. 

Here's more info, and wondering where I'm going wrong with the syntax or skuid setting? 

Skuid page with Button placed in page layout (More Detail).

Simple css syntax created to test in skuid. This css syntax should replace the current css syntax (.nx-cal-event) in skuid as shown in the codepen.:
.nx-cal-event-more {
    border-radius: 1px!important;
jQuery syntax for the More Detail button:
$(document).ready(function() {
  $("button").click(function() {
In-Line (Snippet) name: moredetailbtn

Button properties Action set as:

Thank you in advance!
Photo of ns


  • 1,790 Points 1k badge 2x thumb

Posted 4 months ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 9,888 Points 5k badge 2x thumb

I am not sure how you implemented the snippet.  If you used the document.ready option in your script, this may have been the issue.

Here is a page that I think demonstrates what you are looking to do:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
        <grid uniqueid="sk-3WepiH-206">
                <division behavior="flex" minwidth="100px" ratio="1">
                        <buttonset uniqueid="sk-3Wf95X-267">
                                <button type="multi" label="Toggle" uniqueid="sk-3Wf9Y5-274" icon="sk-icon-magic">
                                        <action type="custom" snippet="toggleSnippet"/>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                        <template multiple="false" uniqueid="sk-3Wes5J-236" allowhtml="true">
                            <contents>  &lt;div class="nx-cal-event"&gt;
    &lt;p class="nx-cal-event"&gt;Testing Toggle Function&lt;/p&gt;
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                <styleitem type="background" bgtype="none"/>
            <jsitem location="inlinesnippet" name="toggleSnippet" cachelocation="false">var params = arguments[0],
$ = skuid.$;
            <cssitem location="inline" name="newcss" cachelocation="false">body {
                background-color: #000;
                .nx-cal-event {
                font-size: 100%;
                color: red;
                font-family: "ABeeZee";
                .nx-cal-event-more {
                color: #FFF!important;
                background-color: #039BE5;
                text-align: center;
                box-sizing: border-box;
                padding: 25px;
                border-radius: 2px;
                overflow: hidden;
                .format {
                font-size: 80%;
                color: black;
        <styleitem type="background" bgtype="none"/>


Photo of ns


  • 1,790 Points 1k badge 2x thumb
Hi Bill, 

That's it! You got it to work. I can now go back in and see where I fudged it up on the syntax. 

Thank you so much!