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>



  <style>
  p { width:400px; }
  </style>
  

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

  <p>
    *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]
<br><br>
jQuery API
  </p>

<script>
  
    $("#atoggle").click(function () {
      $("p").slideToggle("slow");
    });

    $("button").click(function () {
      $("p").slideToggle("fast");
    });
</script>

Toggle and Show/Hide Buttons



Show and Hide buttons using the jQuery 
show();
hide();.

Set the speed in millseconds or Slow/Fast.

show(1000);
hide(fast);

For a Quick preview use the Live HTML editor.

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


<button>Toggle</button>  

  <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>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});

$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>
<script>
$("button").click(function () {
$("div").slideToggle("fast");
});
</script>