Web Part JS ToggleMe not running

Question

I want to add toggled visible / invisible divs to a SharePoint wiki page, and put the function for the toggling in a web part. My toggling script works fine testing outside of SharePoint, but inside SP it won't run.

I'm able to add CSS and an ultra-basic script to the web part, and both seem to function fine in both IE and FF to change the page content the way I want them to.

There may be some restrictions preventing my site running some active content.

The JS I'm using:

<script type="text/javascript">
function toggleMe(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display="none"){
e.style.display="block"
  } else {
e.style.display="none"
  }
  return true;
}
</script>

on-page content:

<input type="button" class="button" onclick="return toggleMe('simplicity')" value="Simplicity">
<div id="simplicity" style="display:none">
<p>(content here)</p>
</div>

Any insight would be fantastic. Thanks ahead of time.

Answer 1

I can't see anything directly wrong in your script. You could try debugging it by setting breakpoints in your favorite browser developer tools.

Just as a note, it could be easier to use a library such as jQuery, like this:

$(function() {
  $('.button').click(function() {
    $('#simplicity').toggle();
  });
});