{"id":7994,"date":"2015-11-03T16:15:13","date_gmt":"2015-11-03T14:15:13","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7994"},"modified":"2017-12-21T15:48:49","modified_gmt":"2017-12-21T13:48:49","slug":"jquery-slidetoggle-slideup-slidedown-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/","title":{"rendered":"jQuery slideToggle \/ slideUp \/ slideDown Example"},"content":{"rendered":"

In this example, we’ll be considering three popular jQuery methods .slideUp<\/code>, .slideDown<\/code>, .slideToggle<\/code>.<\/p>\n

For your basic understanding, know that slideUp<\/strong> hides the matched elements with a sliding motion, slideDown<\/strong> displays the matched elements with a sliding motion, while slideToggle<\/strong> will toggle between the two states, meaning it will display or hide the matched elements with a sliding motion.<\/p>\n

The methods are mainly used for animations and do not affect the actual page layout, which means that you may use them regardless of how elements are arranged on a webpage.<\/p>\n

It is also used for other show\/hide functionality like displaying an error message when an input is incorrect.
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Document Setup<\/h2>\n

To begin, create a new HTML document and add the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery SlideUp\/Down\/Toggle Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Note that the jQuery Library is linked locally. If you don’t have it, please download here<\/a>.<\/p>\n
2. Specifications & Examples<\/h2>\n
For each of the methods, we’re giving some more information and each example will consist of a button and a paragraph which will be hidden or shown or toggled depending on the case.<\/p>\n
2.1 slideUp<\/strong> Method<\/h3>\n
The syntax for this method is: $(selector).slideUp(speed,callback);<\/code><\/p>\n
The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.<\/p>\n
To apply the method, first add the following elements in HTML:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Lorem ipsum dolor sit amet!<\/p>\r\n<button>Hide (Slide Up)<\/button>\r\n<\/pre>\n
Now in jQuery, just after the button click, we select the p<\/code> element and hide it (slide it up).<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $('button').click(function(){\r\n        $('p').slideUp();\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
This is how the paragraph slides up in the browser:
\n\"slideup1\"<\/a><\/p>\n
2.2 slideDown<\/strong> Method<\/h3>\n
The syntax for this method is: $(selector).slideDown(speed,callback);<\/code><\/p>\n
The optional speed parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the sliding completes.<\/p>\n
To apply the method, first add the following elements in HTML:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p style=\"display:none;\">Lorem ipsum dolor sit amet!<\/p>\r\n<button>Show (Slide Up)<\/button>\r\n<\/pre>\n
Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;<\/code>
\nNow in jQuery, just after the button click, we select the p<\/code> element and hide it (slide it up).<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $('button').click(function(){\r\n        $('p').slideDown();\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
This is how the paragraph slides down in the browser:
\n\"slidedown1\"<\/a><\/p>\n
2.3 slideToggle<\/strong> Method<\/h3>\n
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.<\/p>\n
The syntax for this method is: $(selector).slideToggle(speed,callback);<\/code><\/p>\n
The optional speed parameter can take the following values: “slow”, “fast”, milliseconds. The optional callback parameter is a function to be executed after the sliding completes.<\/p>\n
To apply the method, first add the following elements in HTML:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Lorem ipsum dolor sit amet!<\/p>\r\n<button>Toggle Slide State<\/button>\r\n<\/pre>\n
Note that the paragraph in this case needs not to be displayed so that we can do show it with the method. We achieve this by giving the para a css property: display: none;<\/code>
\nNow in jQuery, just after the button click, we select the p<\/code> element and hide it (slide it up).<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $('button').click(function(){\r\n        $('p').slideToggle();\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
This is how the paragraph toggles between the two states of slide in the browser:
\n\"slidetoggle1\"<\/a><\/p>\n
3. Extending Basic Functionality<\/h2>\n
Let’s now use the speed parameter and a callback function just to give you an idea of how you can use these. Add the following two elements in HTML:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Lorem ipsum dolor sit amet!<\/p>\r\n<button>Click Me<\/button>\r\n<\/pre>\n
In the JS section, let’s give the sliding a duration of 1000ms and a function which will just alert a message of our choice.<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n    $('button').click(function(){\r\n        $('p').slideUp(1000, function(){\r\n            alert(\"Slide Up Completed!\")\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
The same goes for either slideDown or slideToggle, so we’re just going to demonstrate one of the methods:
\n\"slidedown2\"<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, jQuery provides three methods for hiding and showing content using a smooth and soft animation. In a way, it is a substitution for the manual hiding and showing content via the hide()<\/strong> and show()<\/strong> methods (even though not exactly) which just had the functionality with no animation at all.<\/p>\n
To get more information on these methods, do refer the the official jQuery website and get familiar with the options if you intend to use it in a more professional manner.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery SlideToggle<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’ll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp hides the matched elements with a sliding motion, slideDown displays the matched elements with a sliding motion, while slideToggle will toggle between the two states, meaning it will display or hide the matched elements with …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-03T14:15:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T13:48:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery slideToggle \/ slideUp \/ slideDown Example\",\"datePublished\":\"2015-11-03T14:15:13+00:00\",\"dateModified\":\"2017-12-21T13:48:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\"},\"wordCount\":699,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\",\"name\":\"jQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-11-03T14:15:13+00:00\",\"dateModified\":\"2017-12-21T13:48:49+00:00\",\"description\":\"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery slideToggle \/ slideUp \/ slideDown Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026","description":"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp","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.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026","og_description":"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-11-03T14:15:13+00:00","article_modified_time":"2017-12-21T13:48:49+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery slideToggle \/ slideUp \/ slideDown Example","datePublished":"2015-11-03T14:15:13+00:00","dateModified":"2017-12-21T13:48:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/"},"wordCount":699,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/","name":"jQuery slideToggle \/ slideUp \/ slideDown Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-11-03T14:15:13+00:00","dateModified":"2017-12-21T13:48:49+00:00","description":"In this example, we'll be considering three popular jQuery methods .slideUp, .slideDown, .slideToggle. For your basic understanding, know that slideUp","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-slidetoggle-slideup-slidedown-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery slideToggle \/ slideUp \/ slideDown Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7994"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7994\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}