hideNshow using CSS classes

Using the CSS straight from Bootstrap but without bootstrap to hide and show elements (still using jQuery though)

by Matt Rummler

HTML

<form id="testForm">
    <div class="show" id='divShow'>
        This is the content that is initially shown
    </div>
    <div class="hidden" id='divHidden'>
        This is the content that is initially hidden
    </div>
    <div class="unaffected" id='divIndifferent'>
        This content should always be visisble
        (unless I decide to specifically show it or hide it of course, bwaahaaahaa ha!!!)
    </div>
    <div class='hidden' id='showUpLateStayLate'>
        I will be hidden but, most likely, I will show up and never leave again
    </div>
    <input type="button" id="toggleShow" value="show hidden hide shown">
</form>

CSS

.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

JavaScript

$('#toggleShow').on('click',function()
{
    toggleShow('divShow','toggle');
    toggleShow('divHidden','toggle');
    toggleShow('divIndifferent','hide');
    toggleShow('showUpLateStayLate','show');
});
function toggleShow(elementName,usage)
{
  var ElementObj=$('#'+elementName);
  if(usage=='undefined' || usage=='toggle')
  {
    if(ElementObj.prop('class')=='hidden')
    {
      usage='show';
    }
    if(ElementObj.prop('class')=='show')
    {
      usage='hidden';
    }
  }
  if(usage=='hidden')
  {
    ElementObj.prop('class','hidden');
  }
  if(usage=='show')
  {
    ElementObj.prop('class','show');
  }
  if(usage=='invisible')
  {
    ElementObj.prop('class','invisible');
  }
  if(usage=='hide')
  {
    ElementObj.prop('class','hidden');//.hide();
  }
}