{"id":843,"date":"2020-06-27T20:16:03","date_gmt":"2020-06-27T14:46:03","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=843"},"modified":"2020-07-12T18:37:49","modified_gmt":"2020-07-12T13:07:49","slug":"create-html-and-jquery-according","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/","title":{"rendered":"Create an Accordion with HTML and jQuery"},"content":{"rendered":"<h2>Simple Accordion with HTML &amp; JQuery<\/h2>\n<p>An accordion used to create FAQ and Question &amp; Answers. A vertical accordion is the show list. Each item can be expanded or collapsed to show and hide content with that item. It helps to allow the developer to handle the larget amount of text into small spaces on the pages.<\/p>\n<h3>HTML Code for Accordion<\/h3>\n<pre>&lt;div id=\"stepIntegarateSection\" class=\"stepIntegarateSection\"&gt;\r\n&lt;div class=\"stepSection\"&gt;\r\n&lt;div class=\"stepSection-heading\" id=\"zohoIntegrationStepOne\"&gt;&lt;h5&gt;Step 1&lt;\/h5&gt;&lt;\/div&gt;\r\n&lt;div class=\"stepSection-para\"&gt;\r\n&lt;p&gt;\r\n<strong>Lorem Ipsum<\/strong>\u00a0is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"stepSection\"&gt;\r\n&lt;div class=\"stepSection-heading\" id=\"zohoIntegrationStepTwo\"&gt;&lt;h5&gt;Step 2&lt;\/h5&gt;&lt;\/div&gt;\r\n&lt;div class=\"stepSection-para\"&gt;\r\n&lt;p&gt;\r\n<strong>Lorem Ipsum<\/strong>\u00a0is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"stepSection\"&gt;\r\n&lt;div class=\"stepSection-heading\" id=\"zohoIntegrationStepThree\"&gt;&lt;h5&gt;Step 3&lt;\/h5&gt;&lt;\/div&gt;\r\n&lt;div class=\"stepSection-para\"&gt;\r\n&lt;p&gt;\r\n<strong>Lorem Ipsum<\/strong>\u00a0is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"stepSection\"&gt;\r\n&lt;div class=\"stepSection-heading\" id=\"zohoIntegrationStepFour\"&gt;&lt;h5&gt;Step 4&lt;\/h5&gt;&lt;\/div&gt;\r\n&lt;div class=\"stepSection-para\"&gt;\r\n&lt;p&gt;\r\n<strong>Lorem Ipsum<\/strong>\u00a0is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\r\n&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h3>JQuery Code for Accordion<\/h3>\n<pre>&lt;script type=\"text\/javascript\"&gt;\r\njQuery(document).ready(function(){\r\njQuery('.stepSection .stepSection-para').hide();\r\njQuery('#stepIntegarateSection .stepSection').first().find('.stepSection-para').show();\r\njQuery('.stepSection-heading').click(function(){\r\njQuery(this).parent('.stepSection').find('.stepSection-para').slideDown();\r\njQuery(this).parent('.stepSection').siblings().find('.stepSection-para').slideUp();\r\n});\r\n});\r\n&lt;\/script&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Simple Accordion with HTML &amp; JQuery An accordion used to create FAQ and Question &amp; Answers. A vertical accordion is the show list. Each item can be expanded or collapsed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-843","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create an Accordion with HTML and jQuery - MyFreeOnlineTools<\/title>\n<meta name=\"description\" content=\"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an Accordion with HTML and jQuery - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-27T14:46:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-12T13:07:49+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"225\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Create an Accordion with HTML and jQuery\",\"datePublished\":\"2020-06-27T14:46:03+00:00\",\"dateModified\":\"2020-07-12T13:07:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\"},\"wordCount\":72,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\",\"articleSection\":[\"JavaScript Tutorial\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\",\"name\":\"Create an Accordion with HTML and jQuery - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\",\"datePublished\":\"2020-06-27T14:46:03+00:00\",\"dateModified\":\"2020-07-12T13:07:49+00:00\",\"description\":\"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg\",\"width\":400,\"height\":225,\"caption\":\"Create an Accordion with HTML and jQuery\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create an Accordion with HTML and jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create an Accordion with HTML and jQuery - MyFreeOnlineTools","description":"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code","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:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/","og_locale":"en_US","og_type":"article","og_title":"Create an Accordion with HTML and jQuery - MyFreeOnlineTools","og_description":"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code","og_url":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-06-27T14:46:03+00:00","article_modified_time":"2020-07-12T13:07:49+00:00","og_image":[{"width":400,"height":225,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Create an Accordion with HTML and jQuery","datePublished":"2020-06-27T14:46:03+00:00","dateModified":"2020-07-12T13:07:49+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/"},"wordCount":72,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg","articleSection":["JavaScript Tutorial"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/","url":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/","name":"Create an Accordion with HTML and jQuery - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg","datePublished":"2020-06-27T14:46:03+00:00","dateModified":"2020-07-12T13:07:49+00:00","description":"Create an Accordion with HTML and jQuery MyFreeOnlineTools Free Code","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/06\/create-an-accordion-with-html-and-jquery.jpg","width":400,"height":225,"caption":"Create an Accordion with HTML and jQuery"},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/create-html-and-jquery-according\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create an Accordion with HTML and jQuery"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=843"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/846"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}