jQuery Toggle Button

You can use the jQuery slidetoggle(); to toggle the visiblity of content in a Google Sites HTML Box.

jQuery Toggle Button

Toggle button and paragraph use without an id attribute.

The HTML Box does not support any external calls like 
<a href="#"></a> or document window etc..

So you need to use a button which supports click(); to call a specific function.

jQuery Toggle Button Example:

Click the jQuery toggle button to toggle the content below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>

  p { width:400px; }

 <a id="atoggle">Toggle</a>

    *NEW Try the HTML Box Code in the Live HTML Editor 
[Always Check the HTML Box for Restrictions that may work live and 
save your work as you edit for the HTML Box & Webpage]
jQuery API

    $("#atoggle").click(function () {

    $("button").click(function () {

Toggle and Show/Hide Buttons

Show and Hide buttons using the jQuery 

Set the speed in millseconds or Slow/Fast.


For a Quick preview use the Live HTML editor.

    div { background:#ff6600;color:#ffffff; margin:5px; width:80px;
  display:none; float:left; text-align:center; }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>


  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>#1 jquery toggle content</div>
  <div> #2 jquery toggle content </div>
  <div> #3 jquery toggle content </div>
  <div> #4 jquery toggle content </div>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);

$("#hidr").click(function () {
$("button").click(function () {