{"id":11784,"date":"2022-08-26T09:08:51","date_gmt":"2022-08-26T09:08:51","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=11784"},"modified":"2023-05-11T07:29:45","modified_gmt":"2023-05-11T07:29:45","slug":"belajar-jquery-efek-hide-dan-show-2","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/","title":{"rendered":"Belajar jQuery : Efek Hide dan Show"},"content":{"rendered":"\n<p>Efek JQuery Hide dan Show<\/p>\n\n\n\n<p>Pada kesempatan kali ini, kita akan mempelajari tentang salah satu efek dari JQuery.<\/p>\n\n\n\n<p>Sebelumnya sudah pernah kita bahas tentang event dan effect dari JQuery disini (https:\/\/www.webhozz.com\/blog\/belajar-jquery-pengenalan-dan-syntax-dasar\/).<\/p>\n\n\n\n<p>Efek dari JQuery kali ini adalah Hide dan Show.<\/p>\n\n\n\n<p>Seperti namanya sudah dapat ditebak bahwa artinya sembunyi dan tampil.<\/p>\n\n\n\n<p>Ya, bener banget.<\/p>\n\n\n\n<p>Artinya kita akan membuat elemen HTML bisa menghilang atau ditampilkan.<\/p>\n\n\n\n<p>Sebagai Contoh, kita langsung praktekkan aja ya. Yuk\u2026<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Ketikkan script kode HTML berikut ini, tambahkan juga script JQuery seperti yang sudah dijelaskan disini(https:\/\/www.webhozz.com\/blog\/belajar-jquery-pengenalan-dan-syntax-dasar\/).<\/li><\/ol>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Hide dan Show&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n     \n    &lt;h1&gt;Hide dan Show&lt;\/h1&gt;\n \n    &lt;button&gt;Hilangkan&lt;\/button&gt;\n    &lt;button&gt;Tampilkan&lt;\/button&gt;\n \n    &lt;h4&gt;Teks ini akan hilang dan bisa Tampil lagi...&lt;\/h4&gt;\n \n \n    &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.4.1.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script&gt;\n        $(document).ready(function () \n        {\n             \n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n\n\n<p>Maka akan tampil seperti ini pada browser.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"779\" height=\"475\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1.png\" alt=\"\" class=\"wp-image-9267\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1.png 779w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1-300x183.png 300w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1-768x468.png 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/figure>\n\n\n\n<p>2. Kita lihat, disitu ada kedua tombol kan??? Nah, event untuk menuju dari Hide dan Show akan dimasukkan pada kedua tombol itu.<br>Jadi kita butuh event \u201cclick\u201d Dan ada teks HTML , yang bertuliskan pesan \u201cTeks ini akan hilang dan bisa Tampil lagi\u2026\u201d. Artinya, pesan tersebutlah yang nanti akan hilang serta bisa tampil, setelah kita klik kedua tombol di atasnya.<br>Oke, untuk kedua tombol tersebut, kita tambahkan masing-masing nama class untuk identifikasi di JQuerynya nanti.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button class=&quot;hilang&quot;&gt;Hilangkan&lt;\/button&gt;\n    &lt;button class=&quot;tampil&quot;&gt;Tampilkan&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>3. Seperti penjelasan langkah no. 2. Kita akan menambahkan event pada kedua class=\u201d\u201d tadi. Yaitu event \u201c.click()\u201d. Berdasar kedua class=\u201d\u201d tadi, inilah contoh eventnya di JQuery.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(document).ready(function () \n{\n    $(&quot;.hilang&quot;).click(function() \n    { \n        \/\/efeknya disini  \n    });\n \n    $(&quot;.tampil&quot;).click(function() \n    { \n        \/\/efeknya disini  \n    });\n});\n<\/pre><\/div>\n\n\n<p>Nah, begitulah format untuk event dari JQuery. Artinya, efek akan bekerja saat kedua tombol yang sudah diberikan class=\u201d\u201d sudah diklik.<\/p>\n\n\n\n<p>4. Oke, untuk tambahan efeknya kita tambahan kode \u201c.hide()\u201d dan \u201c.show\u201d dalam kedua event tersebut.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;.hilang&quot;).click(function() \n{ \n    $(&quot;h4&quot;).hide(); \n});\n \n$(&quot;.tampil&quot;).click(function() \n{ \n    $(&quot;h4&quot;).show();  \n});\n<\/pre><\/div>\n\n\n<p>Nah, disitu kita lihat ada $(\u201ch4\u201d) kan??? Itu adalah elemen HTML yang akan kita berikan efek.<\/p>\n\n\n\n<p>5. Kita jalankan lagi di browser,awalnya akan tampil normal seperti pada gambar di langkah 1. Lalu kita coba klik tombol \u201cHilangkan\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"657\" height=\"397\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-2-1.png\" alt=\"\" class=\"wp-image-9266\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-2-1.png 657w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-2-1-300x181.png 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<p>Gambar di atas kita lihat bahwa elemen teks HTMLnya yang tadinya di bawah kedua tombol tersebut jadi menghilang.<\/p>\n\n\n\n<p>6. Seperti langkah no. 5, kan teksnya sudah hilang. Kita akan tampilkan lagi dengan klik tombol \u201cTampilkan\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"779\" height=\"475\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1.png\" alt=\"\" class=\"wp-image-9267\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1.png 779w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1-300x183.png 300w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-1-1-768x468.png 768w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/figure>\n\n\n\n<p>Pada gambar di atas, kita lihat bahwa teks yang tadinya hilang bisa tampil lagi. Oh iya, tombol \u201cTampilkan\u201d hanya bisa berfungsi jika elemen yang terkait sudah dihilangkan.<\/p>\n\n\n\n<p>7. Ada satu effect lagi, yaitu \u201cToggle\u201d. Kita coba sama-sama ya. Kita buatkan tombol baru.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button class=&quot;tugel&quot;&gt;Toggle&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>Sehingga di browser, kita sudah punya 3 tombol.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"671\" height=\"413\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3.png\" alt=\"\" class=\"wp-image-9268\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3.png 671w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3-300x185.png 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/figure>\n\n\n\n<p>8. Lalu kita buatkan juga event beserta effectnya pada JQuery, untuk effectnya kita gunakan \u201c.toggle()\u201d.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;.tugel&quot;).click(function() \n    { \n        $(&quot;h4&quot;).toggle();  \n    });\n<\/pre><\/div>\n\n\n<p>9. Saat kita jalankan di browser, klik tombol \u201cToggle\u201d maka akan terjadi sebagai berikut.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"593\" height=\"373\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-4.png\" alt=\"\" class=\"wp-image-9269\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-4.png 593w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-4-300x189.png 300w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/figure>\n\n\n\n<p>Nah, effect toggle bisa menghilangkan elemen HTML yang terkait.<\/p>\n\n\n\n<p>Tapi, kita coba klik tombol \u201cToggle\u201d sekali lagi.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"413\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3-1.png\" alt=\"\" class=\"wp-image-9270\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3-1.png 671w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-3-1-300x185.png 300w\" sizes=\"(max-width: 671px) 100vw, 671px\" \/><\/figure>\n\n\n\n<p>Jadi, toggle bisa juga menampilkan. Artinya toggle bisa dua-duanya.<\/p>\n\n\n\n<p>10. Bukan hanya itu aja, ada parameter tambahan lagi. Pada effect \u201c.hide()\u201d, \u201c.show()\u201d, \u201c.toggle()\u201d kita bisa tambahkan nilai disitu contohnya \u201c2000\u201d. Perhatikan contoh berikut.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n$(&quot;.hilang&quot;).click(function() \n    { \n        $(&quot;h4&quot;).hide(2000); \n    });\n \n    $(&quot;.tampil&quot;).click(function() \n    { \n        $(&quot;h4&quot;).show(2000);  \n    });\n \n    $(&quot;.tugel&quot;).click(function() \n    { \n        $(&quot;h4&quot;).toggle(2000);  \n    });\n<\/pre><\/div>\n\n\n<p>Lalu, kita bisa coba lagi dengan semua tombol yang sudah kita buat.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"395\" src=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-5.png\" alt=\"\" class=\"wp-image-9271\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-5.png 675w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/07\/gambar-5-300x176.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Angka tersebut adalah parameter yang berfungsi untuk menunjukkan waktu durasi. 2000 artinya 2 detik.<\/p>\n\n\n\n<p>Jadi, masing-masing efek tersebut akan hilang atau muncul secara perlahan dalam waktu 2 detik. Silahkan coba dengan angka yang berbeda, supaya dapat hasil efek yang punya durasi yang beda.<\/p>\n\n\n\n<p>Demikianlah, sekilas tentang efek Hide dan Show dari JQuery ini. Akhir kata, semoga bermanfaat ya.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Efek JQuery Hide dan Show Pada kesempatan kali ini, kita akan mempelajari tentang salah satu efek dari JQuery. Sebelumnya sudah pernah kita bahas tentang event<\/p>\n","protected":false},"author":1,"featured_media":11743,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4317,4318,4320,4319,4315,4316],"class_list":["post-11784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design","tag-belajar-jquery-efek-hide-dan-show","tag-belajar-jquery-efek-hide-dan-show-pemula","tag-kursus-jquery-efek-hide-dan-show-bandung","tag-kursus-jquery-efek-hide-dan-show-jakarta","tag-tutorial-jquery-efek-hide-dan-show","tag-tutorial-jquery-efek-hide-dan-show-pemula"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Belajar jQuery : Efek Hide dan Show - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar jQuery : Efek Hide dan Show - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Efek JQuery Hide dan Show Pada kesempatan kali ini, kita akan mempelajari tentang salah satu efek dari JQuery. Sebelumnya sudah pernah kita bahas tentang event\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-26T09:08:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-11T07:29:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\"},\"headline\":\"Belajar jQuery : Efek Hide dan Show\",\"datePublished\":\"2022-08-26T09:08:51+00:00\",\"dateModified\":\"2023-05-11T07:29:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/\"},\"wordCount\":500,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"keywords\":[\"Belajar jQuery Efek Hide dan Show\",\"Belajar jQuery Efek Hide dan Show Pemula\",\"Kursus jQuery Efek Hide dan Show Bandung\",\"Kursus jQuery Efek Hide dan Show Jakarta\",\"Tutorial jQuery Efek Hide dan Show\",\"Tutorial jQuery Efek Hide dan Show Pemula\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/\",\"name\":\"Belajar jQuery : Efek Hide dan Show - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"datePublished\":\"2022-08-26T09:08:51+00:00\",\"dateModified\":\"2023-05-11T07:29:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/jQuery_1.jpg\",\"width\":\"750\",\"height\":\"400\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-jquery-efek-hide-dan-show-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar jQuery : Efek Hide dan Show\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/d5f539ad171dc74baaf6a98dfef6fcef\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar jQuery : Efek Hide dan Show - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/","og_locale":"en_US","og_type":"article","og_title":"Belajar jQuery : Efek Hide dan Show - WebHozz Blog","og_description":"Efek JQuery Hide dan Show Pada kesempatan kali ini, kita akan mempelajari tentang salah satu efek dari JQuery. Sebelumnya sudah pernah kita bahas tentang event","og_url":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/","og_site_name":"WebHozz Blog","article_published_time":"2022-08-26T09:08:51+00:00","article_modified_time":"2023-05-11T07:29:45+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef"},"headline":"Belajar jQuery : Efek Hide dan Show","datePublished":"2022-08-26T09:08:51+00:00","dateModified":"2023-05-11T07:29:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/"},"wordCount":500,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","keywords":["Belajar jQuery Efek Hide dan Show","Belajar jQuery Efek Hide dan Show Pemula","Kursus jQuery Efek Hide dan Show Bandung","Kursus jQuery Efek Hide dan Show Jakarta","Tutorial jQuery Efek Hide dan Show","Tutorial jQuery Efek Hide dan Show Pemula"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/","url":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/","name":"Belajar jQuery : Efek Hide dan Show - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","datePublished":"2022-08-26T09:08:51+00:00","dateModified":"2023-05-11T07:29:45+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2022\/08\/jQuery_1.jpg","width":"750","height":"400"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/belajar-jquery-efek-hide-dan-show-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar jQuery : Efek Hide dan Show"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/d5f539ad171dc74baaf6a98dfef6fcef","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=11784"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11784\/revisions"}],"predecessor-version":[{"id":12463,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/11784\/revisions\/12463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/11743"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=11784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=11784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=11784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}