This blog was created using the OSnippets template available from

A Stoplight Status Component Using Bootstrap

I had a request to create a "stoplight" status section in a recent application.  The purpose of this section would be for the users to register a red, yellow, green status to a number of categories on a product development information form.  

Using a combination of Twitter Bootstrap and jQuery I was able to create a nice looking component that provided the exact functionality they were hoping to achieve.

Here is a link to the demo page where you can see this in action.


Button Code

<a id="cat_1_btn" class="cat1" href="javascript:statusToggle('cat1')" role="button">
Strategic Support</a>
<a id="cat_2_btn" class="cat2" href="javascript:statusToggle('cat2')" role="button">
Competitive Landscape</a>
<a id="cat_3_btn" class="cat3" href="javascript:statusToggle('cat3')" role="button">
Product Development</a>

statusToggle Code

All the below function does is to check the current CSS class of the button and toggle it to the next one.  Very simple.

function statusToggle(category) { 
  if ($("." + category).hasClass("btn btn-success btn-xs btn-custom")) { 
    $("." + category).removeClass("btn btn-success btn-xs btn-custom")
    $("." + category).addClass("btn btn-danger btn-xs btn-custom")
    $("." + category + "Status").val("danger")
  } else if  ($("." + category).hasClass("btn btn-danger btn-xs btn-custom")) { 
    $("." + category).removeClass("btn btn-danger btn-xs btn-custom")
    $("." + category).addClass("btn btn-warning btn-xs btn-custom")
    $("." + category + "Status").val("warning")
  } else if ($("." + category).hasClass("btn btn-warning btn-xs btn-custom")) { 
    $("." + category).removeClass("btn btn-warning btn-xs btn-custom")
    $("." + category).addClass("btn btn-success btn-xs btn-custom")
    $("." + category + "Status").val("success")

The CSS classes set by the above code is standard Twitter Bootstrap CSS. The final btn-custom class only serves to add some margins and bold weight to the button text.  Nothing special there.  

Interestingly enough, the above code was initially implemented in an Oracle APEX application.   Since it was all javascript and CSS I was able to easily port the code over to a sample xPages application without changing really anything.   


Tagged with jQuery xPages Bootstrap 
Shean wrote on 13.08.2014, 20:17

Glad you enjoyed my code Elijah!

Elijah wrote on 08.08.2014, 08:49

Great piece of functionality! Thanks for sharing. I am so glad I have adopted the bootstrap/jquery framework. I think I might adapt this in order to create an easily to update system status page.