This document contains code for a slide toggle widget that hides and shows a div element. It includes CSS styling for the toggle button and widget, links to the jQuery library, and JavaScript code that uses a click handler to toggle the display of the widget using slideToggle() when the button is clicked.

1. Slide Toggle
#show-
button{padding:0;background:#555;color:#3498db;cursor:pointer;display:inline-
block}
#show-widget{display:none;text-align:left;background:#555;color:#fff;padding:0}
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
<script type='text/javascript'>$(document).ready(function(){$(&quot;#show-
button&quot;).click(function(){$(&quot;#show-
widget&quot;).slideToggle()})});</script>
<div id='show-button'>TOMBOL SHOW/HIDE</div>
<div id='show-widget'> WIDGET YANG AKAN DISEMBUNYIKAN</div>
TOGGLE
<style type='text/css'>
#show-button{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#show-widget{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}
</style>
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#show-button").click(function(){
$("#show-widget").toggle();
});
});
</script>
<button id='show-button'>TOMBOL SHOW/HIDE</button>
<div id='show-widget'>WIDGET YANG AKAN DISEMBUNYIKAN</div>