{"id":65,"date":"2009-12-20T21:30:34","date_gmt":"2009-12-20T13:30:34","guid":{"rendered":"http:\/\/rais.my\/blog\/?p=65"},"modified":"2009-12-20T22:30:51","modified_gmt":"2009-12-20T14:30:51","slug":"hide-show-div-jquery","status":"publish","type":"post","link":"https:\/\/rais.my\/blog\/hide-show-div-jquery\/","title":{"rendered":"Hide \/ Show div &#8211; jquery"},"content":{"rendered":"<p>Salam,<\/p>\n<p>Kadang kala kita nakkan form yang lebih interaktif atau lebih user friendly. Dengan menggunakan javascript membolehkan pelbagai boleh dilakukan kerana javascript merupakan client side script di mana perlaksanaan dilakukan di browser.<\/p>\n<p>Dengan penggunaan jquery memudahkan lagi perlaksanaan ini tanpa kita perlu membina skrip sendiri. Ini kerana jquery telah menyediakan fungsi-fungsi yang boleh digunakan sahaja. Tambahan pula, jquery telah membina fungsi-fungsi tersebut supaya sesuai dengan kebanyakkan browser.<\/p>\n<p>Contoh skrip di bawah merupakan skrip menggunakan <a href=\"http:\/\/jquery.com\" target=\"_blank\">jquery<\/a> bagi memapar dan menyorokkan perkara tertentu bilamana checkbox di klik.<\/p>\n<pre class=\"brush:php\">\r\n<script type=\"text\/javascript\" src=\"jquery-1.3.2.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\t$(document).ready(function(){\r\n\t\t\r\n\t\/\/Hide div w\/id extra\r\n\t   $(\"#extra\").css(\"display\",\"none\");\r\n\r\n\t\/\/ Add onclick handler to checkbox w\/id checkme\r\n\t   $(\"#checkme\").click(function(){\r\n\t\t\r\n\t\t\/\/ If checked\r\n\t\tif ($(\"#checkme\").is(\":checked\"))\r\n\t\t{\r\n\t\t\t\/\/show the hidden div\r\n\t\t\t$(\"#extra\").show(\"fast\");\r\n\t\t}\r\n\t\telse\r\n\t\t{\t   \r\n\t\t\t\/\/otherwise, hide it \r\n\t\t\t$(\"#extra\").hide(\"fast\");\r\n\t\t}\r\n\t  });\r\n\t});\r\n\t <\/script>\r\n<\/pre>\n<p>Contoh di bawah pula skrip HTML yang menggunakan skrip di atas.<\/p>\n<pre class=\"brush:html\">\r\n<form>\r\nName:<input id=\"name\" type=\"text\"><br>\r\nCheck to enter your email address:<input id=\"checkme\" type=\"checkbox\" \/><br>\r\n<div id=\"extra\">\r\n\tEmail Address:<input id=\"email\" type=\"text\" \/>\r\n<\/div>\r\n<\/form>\r\n<\/pre>\n<p>Klik <a href=\"http:\/\/rais.my\/dev\/jq_hideshow_checkbox.php\" target=\"_blank\">demo<\/a> untuk lihat hasilnya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Salam, Kadang kala kita nakkan form yang lebih interaktif atau lebih user friendly. Dengan menggunakan javascript membolehkan pelbagai boleh dilakukan kerana javascript merupakan client side script di mana perlaksanaan dilakukan di browser. Dengan penggunaan jquery memudahkan lagi perlaksanaan ini tanpa kita perlu membina skrip sendiri. Ini kerana jquery telah menyediakan fungsi-fungsi yang boleh digunakan sahaja. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"","footnotes":""},"categories":[6,21,22,5],"tags":[37,35,34,38,36],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-internet","category-javascript","category-jquery","category-programming","tag-div-jquery","tag-hide","tag-hide-show-div","tag-hide-show-jquery","tag-show"],"_links":{"self":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/comments?post=65"}],"version-history":[{"count":12,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/posts\/65\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/media?parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/categories?post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rais.my\/blog\/wp-json\/wp\/v2\/tags?post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}