Question

I am using the following plugin: http://codecanyon.net/item/dynamic-step-process-panels/118950
and I am trying to modify its behavior. Currently when the last tab is reached the next button becomes inactive, its class is changed from ‘button activeButton’ to ‘button inactiveButton’. I need to change the next buttons class to one which I create myself, which will act as a submit button.

I have unsuccessfully tried to modify the div class in the following way:

<script type="text/javascript">

    $(document).ready(function() {
        $("#processPanel").processPanel({
            kind: "freeChoice",
            icons: true,
            nextPrevButtons: true,
            style: "green-blue",
            afterOpen: function(event, step, content, stepNumber){
                if(stepNumber==3)
                {
                    $(".button inactiveButton").attr('class', 'button activeButton-green-blue');
                }
            }
        });

Any advice would be greatly appreciated…

Answer 1

To match a single element with multiple classes, prepend each with a period and leave out the space:

$(".button.inactiveButton")...

With the space and inactiveButton not having a prefix, the selector is trying to match something like this:

<div class="button">
    <inactiveButton />
</div>

---

You may also look at using addClass and removeClass rather than setting the class attribute directly:

$(".button.inactiveButton")
    .removeClass('inactiveButton')
    .addClass('activeButton-green-blue');

This way, if the element has any other classes assigned to it, you won’t remove them unintentionally.