Toggle dan slide toggle
Download as TXT, PDF0 likes136 views
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.
Toggle dan slide toggle
- 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(){$("#show- button").click(function(){$("#show- widget").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>