{"id":29512,"date":"2021-03-08T09:43:47","date_gmt":"2021-03-08T17:43:47","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=29512"},"modified":"2021-03-29T04:06:04","modified_gmt":"2021-03-29T11:06:04","slug":"jquery-toggle","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/","title":{"rendered":"Using jQuery toggle()"},"content":{"rendered":"\n<p>The jQuery <code>toggle()<\/code> method can be thought of as a lightswitch. When called, it toggles the selected elements \u201con\u201d or \u201coff.\u201d That is, it toggles between rendering elements to the user or hiding them. In the following example, we will explore how to use <code>toggle()<\/code> to hide and display text when a button is clicked.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is jQuery toggle()?<\/h2>\n\n\n\n<p>The jQuery <code>toggle()<\/code> method displays or hides selected elements on a web page. Much like the word implies, this method works like a lightswitch to toggle the elements \u201con\u201d or \u201coff.\u201d Typically the <code>toggle()<\/code> method is called with HTML buttons but can actually be called on any selected element.&nbsp;<br><\/p>\n\n\n\n<p>In addition to toggling the display between \u201con\u201d and \u201coff,\u201d jQuery <code>toggle()<\/code> accepts an argument for duration. The duration argument can either be a number or string data type. Supplying the duration argument will create an animation that lasts for the specified time.&nbsp;<br><\/p>\n\n\n\n<p>jQuery <code>toggle()<\/code> also accepts a callback function to execute when the animation is complete. Remember, a callback function is a function that is passed to another function to be executed later. If no arguments are provided, <code>toggle()<\/code> will simply toggle the display \u201con\u201d or \u201coff.\u201d&nbsp;<br><\/p>\n\n\n\n<p>Let\u2019s take a look at basic syntax and then dive deeper with example code. Our example code will cover animation toggling between a photo and text.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">toggle() jQuery Syntax&nbsp;<\/h2>\n\n\n\n<p>As stated in our introduction, the jQuery <code>toggle()<\/code> method by default can be thought of as a lightswitch. Once clicked, it turns the selected element \u201con\u201d or \u201coff\u201d in the display. Like any jQuery method, an element must be selected before <code>toggle()<\/code> is called.&nbsp;<br><\/p>\n\n\n\n<p>Let\u2019s look at an example using <code>toggle()<\/code> with no arguments. Beginning with our HTML file:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;button&gt;\nClick me\n&lt;\/button&gt;\n&lt;p&gt;\nRead me!\n&lt;\/p&gt;\n&lt;p id=&quot;hide&quot; style=&quot;display: none&quot;&gt;\nNO! Read ME!\n&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>From here, we can see our HTML file is rendering a button and two paragraph tags. Notice the style attribute of the &lt;p&gt; tag with the id \u201chide.\u201d Setting the display to none will hide that paragraph element from the display.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/4tKjGhPaZiPAG8tMmRuEFwD6BaLuYTyDDREpS0BRKEbCcTMDZdPVQRXhvsf4EUiVMNC1DVAyjsINQA2VTt2NrZamfKuyQep0ELc0PI8qv-qvr1X0STHQnfE4b3W1Fq925mI6upCb\" alt=\"\"\/><\/figure>\n\n\n\n<p>Our HTML file is rendering exactly as we predicted. Now let\u2019s use jQuery toggle to show the hidden &lt;p&gt; tag. In this example, we will include our jQuery inside of the HTML file. In order to do this, we have to wrap our jQuery in a &lt;script&gt; tag:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;script&gt;\n$(&quot;button&quot;).click(function() {\n  $(&quot;#hide&quot;).toggle();\n})\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>As with all jQuery methods, we first have to select an element. Here, we\u2019ve selected the button element and called the <code>click()<\/code> method. The <code>click()<\/code> method essentially attaches an event listener to the selected button. Once the button is clicked, it calls the callback function and executes our <code>toggle()<\/code> method. Read more about jQuery <code>click()<\/code> <a href=\"https:\/\/careerkarma.com\/blog\/jquery-click\/\">here<\/a>.&nbsp;<br><\/p>\n\n\n\n<p>Let\u2019s take a look at our code in action.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/QKzD1zm6bNiZXK2QxFeShVDrE1M5uykhU4MunDj35eJDpKjKx7hj900oX0hAsGkWGVCKDyPMcLImUmr6nG7XJRUQK2LSq7V8myGvbenKzhV9LfZgaHlkKalGwVTL-7lvVW9gvtCH\" alt=\"\"\/><\/figure>\n\n\n\n<p>Great! When we clicked the button, the hidden paragraph tag is displayed. Now that we are familiar with the syntax for <code>toggle()<\/code>, let\u2019s look at an example using animation.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">jQuery toggle() in Action<\/h2>\n\n\n\n<p>So far we\u2019ve seen how <code>toggle()<\/code> can hide or expose selected elements in the display. Now, let\u2019s take a look at an animation example that is slightly more complex. Don\u2019t worry, we\u2019ve discussed most of the concepts in the above section!<br><\/p>\n\n\n\n<p>For our example, we are going to render a button, an image, and some text wrapped in a &lt;p&gt; tag. Our HTML file will look something like this:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;button&gt;\nClick me\n&lt;\/button&gt;\n&lt;img id=&quot;cat&quot; src=&quot;https:\/\/images.pexels.com\/photos\/2256259\/pexels-photo-2256259.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&quot;&gt; \n&lt;p style=&quot;display: none&quot;&gt;\nAnimation Complete\n&lt;\/p&gt;  <\/pre><\/div>\n\n\n\n<p>Notice again, our paragraph element will be hidden due to the value of the display attribute.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/sTsCqhvbszde4md7zghYl4sge-gQlbZxh1X07_6ms7MS7r9NK32dC-1KKotWbPQaZ26IlbgEwvXnD7B9mZmzpuC9caJ2mgE-lR-Nt7sKKg_XLRyiGaiDDDSBymkSZMxMzUvB4Dhp\" alt=\"\"\/><\/figure>\n\n\n\n<p>Our Lucky Kitty is rendering along with the button. Since our style attribute of the &lt;p&gt; tag is set to \u201cdisplay: none,\u201d the text is hidden. Now, let\u2019s try to slowly hide the photo and show the text when the button is clicked.<br><\/p>\n\n\n\n<p>The argument for duration in jQuery toggle can either be a number or a string. If it is a number, that number represents milliseconds. For a string value, <code>toggle()<\/code> accepts \u201cfast\u201d or \u201cslow,\u201d which are 600 or 200 milliseconds, respectively.&nbsp;<br><\/p>\n\n\n\n<p>For example, we wanted to slowly hide the photo, so we will use \u201cslow\u201d for our argument to <code>toggle()<\/code>. As with our first example, we will wrap our jQuery in a script tag at the bottom of the HTML file.&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;script&gt;\n$('button').click(function() {\n  $('#cat').toggle('slow', function() {\n    $('p').toggle();\n  })\n})\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>After selecting the button and calling <code>click()<\/code>, our first callback function hides our cat photo. Passing the string \u201cslow\u201d to <code>toggle()<\/code>, we can then pass an additional callback function. This callback function executes after the 200 milliseconds have passed.&nbsp;<br><\/p>\n\n\n\n<p>Once our \u201cslow\u201d time has expired, we will then toggle our paragraph element \u201con.\u201d This will now show the &lt;p&gt; tag to the user.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/CTtLOtsQ54XmklCx5OcZx433DyLj58WScI4eyxxY-P3gGUBn1XhS4SuSuOFuduLftgV01toWpnYpU-CF5DWdiDLzjXpq9n5IBWmVhi-mspQDOS_7TSkIPbQ_AmLifXeNI2x8CCrr\" alt=\"\"\/><\/figure>\n\n\n\n<p>We can see through our handy gif that the image takes some time to hide and is immediately replaced with our text. By using a combination of uses for <code>toggle()<\/code>, we have created a dynamic animation with few lines of code.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>We have discussed what jQuery <code>toggle()<\/code> is and what it does. Then we looked at syntax with some example code. Afterwards, we took what we\u2019ve learned and combined it all to create a simple animation with an image.&nbsp;<br><\/p>\n\n\n\n<p>Now that you\u2019re familiar with jQuery <code>toggle()<\/code> you can start toggling elements in your next project. Or even add animations to images when a button is clicked. If you want to read further about jQuery <code>toggle()<\/code>, read the official <a href=\"https:\/\/api.jquery.com\/toggle\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">documentation<\/a>. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"The jQuery toggle() method can be thought of as a lightswitch. When called, it toggles the selected elements \u201con\u201d or \u201coff.\u201d That is, it toggles between rendering elements to the user or hiding them. In the following example, we will explore how to use toggle() to hide and display text when a button is clicked.&nbsp;&hellip;","protected":false},"author":104,"featured_media":14610,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-29512","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Using jQuery toggle() | Career Karma<\/title>\n<meta name=\"description\" content=\"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/jquery-toggle\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using jQuery toggle()\" \/>\n<meta property=\"og:description\" content=\"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/jquery-toggle\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-08T17:43:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-29T11:06:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"668\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ryan Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Manchester\" \/>\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:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/\"},\"author\":{\"name\":\"Ryan Manchester\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"headline\":\"Using jQuery toggle()\",\"datePublished\":\"2021-03-08T17:43:47+00:00\",\"dateModified\":\"2021-03-29T11:06:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/\"},\"wordCount\":884,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/\",\"name\":\"Using jQuery toggle() | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg\",\"datePublished\":\"2021-03-08T17:43:47+00:00\",\"dateModified\":\"2021-03-29T11:06:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"description\":\"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg\",\"width\":1000,\"height\":668},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-toggle\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using jQuery toggle()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\",\"name\":\"Ryan Manchester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"caption\":\"Ryan Manchester\"},\"description\":\"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.\",\"sameAs\":[\"http:\\\/\\\/www.ryanmanchester.info\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ryan-manchester-6537a630\\\/\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/ryan-manchester\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using jQuery toggle() | Career Karma","description":"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.","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:\/\/careerkarma.com\/blog\/jquery-toggle\/","og_locale":"en_US","og_type":"article","og_title":"Using jQuery toggle()","og_description":"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.","og_url":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-03-08T17:43:47+00:00","article_modified_time":"2021-03-29T11:06:04+00:00","og_image":[{"width":1000,"height":668,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg","type":"image\/jpeg"}],"author":"Ryan Manchester","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Ryan Manchester","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/"},"author":{"name":"Ryan Manchester","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"headline":"Using jQuery toggle()","datePublished":"2021-03-08T17:43:47+00:00","dateModified":"2021-03-29T11:06:04+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/"},"wordCount":884,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/jquery-toggle\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/","url":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/","name":"Using jQuery toggle() | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg","datePublished":"2021-03-08T17:43:47+00:00","dateModified":"2021-03-29T11:06:04+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"description":"jQuery toggle() hides or displays selected elements on a web page. Learn how to get starting with toggle() in this introduction.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/jquery-toggle\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-person-typing-on-computer-keyboard-735911-1.jpg","width":1000,"height":668},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/jquery-toggle\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"Using jQuery toggle()"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5","name":"Ryan Manchester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","caption":"Ryan Manchester"},"description":"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.","sameAs":["http:\/\/www.ryanmanchester.info\/","https:\/\/www.linkedin.com\/in\/ryan-manchester-6537a630\/"],"url":"https:\/\/careerkarma.com\/blog\/author\/ryan-manchester\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=29512"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/29512\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14610"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=29512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=29512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=29512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}