{"id":933,"date":"2019-01-11T15:02:39","date_gmt":"2019-01-11T09:32:39","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=933"},"modified":"2019-01-11T15:02:39","modified_gmt":"2019-01-11T09:32:39","slug":"how-to-create-custom-accordions-using-jquery","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/","title":{"rendered":"How to create custom accordions using jQuery?"},"content":{"rendered":"

 <\/p>\n

The accordion is one of the useful elements. Accordion shows only one collapsible item at a time. But most importantly, an accordion shortens pages and reduce scrolling of the website.\u00a0It can open and hide contents with a single click.<\/p>\n

There are different types of accordions. In accordion, we use small heading or title that indicates what content is hidden. It also uses small icons or image to show that hidden content.<\/p>\n

In short, an accordion is used for reducing some space in the working surface.\u00a0Here, I have used a simple accordion with the help of CSS and JQuery.<\/p>\n

You can follow these methods to open and close accordion.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

HTML<\/strong><\/p>\n

<div class=\"accordion\">\r\n  <div class=\"group\">\r\n    <a href=\"#\">Group-1<\/a>\r\n    <p class=\"body-part\">....<\/p>\r\n    <\/a>\r\n   <\/div>\r\n<\/div>\r\n<div class=\"accordion\">\r\n   <div class=\"group\">\r\n     <a href=\"#\">Group-2<\/a>\r\n     <p class=\"body-part\">...<\/p>\r\n     <\/a>\r\n   <\/div>\r\n<\/div>\r\n<div class=\"accordion\">\r\n   <div class=\"group\">\r\n     <a href=\"#\">Group-2<\/a>\r\n     <p class=\"body-part\">...<\/p>\r\n     <\/a>\r\n   <\/div>\r\n<\/div>\r\n\r\n\r\nCSS<\/strong><\/pre>\n
<style>\r\n\r\n.group .body-part<\/strong>{display:none;padding: 19px 25px;}\r\n.accordion<\/strong>{border:1px solid #dfdbdb;padding: 25px 0;} \r\n.group<\/strong>{margin-top: -10px;margin-left: 21px;}\r\n.group a::after<\/strong>{content:\"+\"; float:right;padding-right:-5px;margin-right: 31px;cursor: pointer;}\r\n.active .group a::after<\/strong>{content:\"-\";}\r\n.group a<\/strong>{display: block;font-size: 20px;}\r\n\r\n<\/style>\r\n\r\n<\/pre>\n
JQuery<\/strong><\/p>\n
$(document).ready(function(){\r\n\r\n   $(\".accordion .group a\").click(function(){\r\n    if($(this).closest(\".accordion\").hasClass(\"active\")) {\r\n      $(this).closest(\".accordion\").removeClass(\"active\");\r\n      $(this).closest(\".accordion\").find(\".body-part\").slideUp();\r\n    }else{\r\n      $(\".accordion\").removeClass(\"active\");\r\n      $(\".accordion\").find(\".body-part\").slideUp();\r\n      $(this).closest(\".accordion\").addClass(\"active\");\r\n      $(this).closest(\".accordion\").find(\".body-part\").slideDown();\r\n    }\r\n  })\r\n})<\/pre>\n","protected":false},"excerpt":{"rendered":"
  The accordion is one of the useful elements. Accordion shows only one collapsible item at a time. But most importantly, an accordion shortens pages and reduce scrolling of the website.\u00a0It can open and hide contents with a single click. There are different types of accordions. In accordion, we use small heading or title that […]<\/p>\n","protected":false},"author":31,"featured_media":960,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,78,5],"tags":[41,79],"yoast_head":"\nHow to create custom accordions using jQuery?<\/title>\n<meta name=\"description\" content=\"The accordion is one of the useful elements. Accordion shows only one collapsible item at a time. But most importantly, an accordion shortens pages...\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create custom accordions using jQuery?\" \/>\n<meta property=\"og:description\" content=\"The accordion is one of the useful elements. Accordion shows only one collapsible item at a time. But most importantly, an accordion shortens pages...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-11T09:32:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/jquary.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/jquary.jpg\",\"width\":900,\"height\":600,\"caption\":\"accordians in jquery\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/\",\"name\":\"How to create custom accordions using jQuery?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/#primaryimage\"},\"datePublished\":\"2019-01-11T09:32:39+00:00\",\"dateModified\":\"2019-01-11T09:32:39+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\"},\"description\":\"The accordion is one of the useful elements. Accordion shows only one collapsible item at a time. But most importantly, an accordion shortens pages...\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/how-to-create-custom-accordions-using-jquery\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/78cc69c3015b9c840d74591261861e22\",\"name\":\"Munmun Das\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/033db0a0941d27e1e3e3bdc05f2e1189?s=96&r=g\",\"caption\":\"Munmun Das\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/933"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=933"}],"version-history":[{"count":6,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions"}],"predecessor-version":[{"id":959,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/933\/revisions\/959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/960"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}