{"id":723,"date":"2017-02-27T10:54:05","date_gmt":"2017-02-27T15:54:05","guid":{"rendered":"http:\/\/dev.wpwhatnot.com\/?p=723"},"modified":"2021-08-30T09:41:49","modified_gmt":"2021-08-30T13:41:49","slug":"simple-jquery-accordion","status":"publish","type":"post","link":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/","title":{"rendered":"A Simple jQuery Accordion"},"content":{"rendered":"<p>No need for the overhead of a plugin.<\/p>\n<p>In this case, I have a custom post type for FAQs, where the title is the question, and the content is the answer.<\/p>\n<p>This script hides all the answers until one of the questions is clicked.<\/p>\n<p>Here&#8217;s the JavaScript:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >&lt;script type=\"text\/javascript\"&gt;\r\n    jQuery(document).ready(function($) {\r\n        $('.accordion').on('click', function() {\r\n            $parent_box = $(this).closest('.faqbox');\r\n            $parent_box.siblings().find('.panel').hide();\r\n            $parent_box.find('.panel').toggle();\r\n        });\r\n    });\r\n&lt;\/script&gt;<\/textarea><\/pre>\n<\/div>\n<p>And the HTML:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >&lt;?php while ( have_posts() ) : the_post(); ?&gt;\r\n\r\n     &lt;div class=\"faqbox\"&gt;\r\n          &lt;h4 class=\"accordion\"&gt;&lt;i class=\"fa fa-plus-square\" aria-hidden=\"true\"&gt;&lt;\/i&gt; &lt;?php the_title(); ?&gt;&lt;\/h4&gt;\r\n          &lt;div class=\"panel\"&gt;&lt;?php the_content(); ?&gt;&lt;\/div&gt;\r\n     &lt;\/div&gt;\r\n\r\n&lt;?php    endwhile; ?&gt;<\/textarea><\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Then, this little bit of CSS brings it together:<\/p>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"php\" name=\"mshighlighter\" >.faqbox { margin: 1em 0 0;\r\n  .panel { display: none;  margin-left: 1em; }\r\n  .accordion { cursor:pointer; }\r\n}<\/textarea><\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>No need for the overhead of a plugin. In this case, I have a custom post type for FAQs, where the title is the question, and the content is the answer. This script hides all the answers until one of the questions is clicked. Here&#8217;s the JavaScript: &lt;script type=&#8221;text\/javascript&#8221;&gt; jQuery(document).ready(function($) { $(&#8216;.accordion&#8217;).on(&#8216;click&#8217;, function() { $parent_box<br \/><a class=\"moretag\" href=\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/\"> [Read More&#8230;]<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>A Simple jQuery Accordion - WPWhatNot<\/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:\/\/wpwhatnot.com\/simple-jquery-accordion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Simple jQuery Accordion - WPWhatNot\" \/>\n<meta property=\"og:description\" content=\"No need for the overhead of a plugin. In this case, I have a custom post type for FAQs, where the title is the question, and the content is the answer. This script hides all the answers until one of the questions is clicked. Here&#8217;s the JavaScript: &lt;script type=&quot;text\/javascript&quot;&gt; jQuery(document).ready(function($) { $(&#039;.accordion&#039;).on(&#039;click&#039;, function() { $parent_box [Read More...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"WPWhatNot\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-27T15:54:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-30T13:41:49+00:00\" \/>\n<meta name=\"author\" content=\"dianawn\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"dianawn\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/\",\"url\":\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/\",\"name\":\"A Simple jQuery Accordion - WPWhatNot\",\"isPartOf\":{\"@id\":\"https:\/\/wpwhatnot.com\/#website\"},\"datePublished\":\"2017-02-27T15:54:05+00:00\",\"dateModified\":\"2021-08-30T13:41:49+00:00\",\"author\":{\"@id\":\"https:\/\/wpwhatnot.com\/#\/schema\/person\/d34672f148454fae30a3e01ebdde2d61\"},\"breadcrumb\":{\"@id\":\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpwhatnot.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Simple jQuery Accordion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpwhatnot.com\/#website\",\"url\":\"https:\/\/wpwhatnot.com\/\",\"name\":\"WPWhatNot\",\"description\":\"a savory collection of WordPress related things\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpwhatnot.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpwhatnot.com\/#\/schema\/person\/d34672f148454fae30a3e01ebdde2d61\",\"name\":\"dianawn\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpwhatnot.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15d4f0a2ff635f43f583bc9aeaa834bd?s=96&d=https%3A%2F%2Fwpwhatnot.com%2Fwp-content%2Fthemes%2Fwhatnot%2Fimages%2Fwnavatar.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15d4f0a2ff635f43f583bc9aeaa834bd?s=96&d=https%3A%2F%2Fwpwhatnot.com%2Fwp-content%2Fthemes%2Fwhatnot%2Fimages%2Fwnavatar.png&r=g\",\"caption\":\"dianawn\"},\"url\":\"https:\/\/wpwhatnot.com\/author\/dianawn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Simple jQuery Accordion - WPWhatNot","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:\/\/wpwhatnot.com\/simple-jquery-accordion\/","og_locale":"en_US","og_type":"article","og_title":"A Simple jQuery Accordion - WPWhatNot","og_description":"No need for the overhead of a plugin. In this case, I have a custom post type for FAQs, where the title is the question, and the content is the answer. This script hides all the answers until one of the questions is clicked. Here&#8217;s the JavaScript: &lt;script type=\"text\/javascript\"&gt; jQuery(document).ready(function($) { $('.accordion').on('click', function() { $parent_box [Read More...]","og_url":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/","og_site_name":"WPWhatNot","article_published_time":"2017-02-27T15:54:05+00:00","article_modified_time":"2021-08-30T13:41:49+00:00","author":"dianawn","twitter_misc":{"Written by":"dianawn","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/","url":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/","name":"A Simple jQuery Accordion - WPWhatNot","isPartOf":{"@id":"https:\/\/wpwhatnot.com\/#website"},"datePublished":"2017-02-27T15:54:05+00:00","dateModified":"2021-08-30T13:41:49+00:00","author":{"@id":"https:\/\/wpwhatnot.com\/#\/schema\/person\/d34672f148454fae30a3e01ebdde2d61"},"breadcrumb":{"@id":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpwhatnot.com\/simple-jquery-accordion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpwhatnot.com\/simple-jquery-accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpwhatnot.com\/"},{"@type":"ListItem","position":2,"name":"A Simple jQuery Accordion"}]},{"@type":"WebSite","@id":"https:\/\/wpwhatnot.com\/#website","url":"https:\/\/wpwhatnot.com\/","name":"WPWhatNot","description":"a savory collection of WordPress related things","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpwhatnot.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpwhatnot.com\/#\/schema\/person\/d34672f148454fae30a3e01ebdde2d61","name":"dianawn","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpwhatnot.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15d4f0a2ff635f43f583bc9aeaa834bd?s=96&d=https%3A%2F%2Fwpwhatnot.com%2Fwp-content%2Fthemes%2Fwhatnot%2Fimages%2Fwnavatar.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15d4f0a2ff635f43f583bc9aeaa834bd?s=96&d=https%3A%2F%2Fwpwhatnot.com%2Fwp-content%2Fthemes%2Fwhatnot%2Fimages%2Fwnavatar.png&r=g","caption":"dianawn"},"url":"https:\/\/wpwhatnot.com\/author\/dianawn\/"}]}},"_links":{"self":[{"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/posts\/723"}],"collection":[{"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":0,"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpwhatnot.com\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}