{"id":1775,"date":"2010-11-15T10:24:58","date_gmt":"2010-11-15T10:24:58","guid":{"rendered":"http:\/\/mts-help.nick.php.dev\/after_sale_support\/jquery\/accordion\/article4.html"},"modified":"2012-01-09T00:38:21","modified_gmt":"2012-01-09T05:38:21","slug":"accordion-3","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/accordion-3.html","title":{"rendered":"&#8220;Accordion&#8221;-3"},"content":{"rendered":"This is an &#8220;Accordion&#8221; Script. So-called &#8220;Accordion&#8221; is a drop-down panel that holds some additional content. <p> <strong>JavaScript<\/strong> <br \/>In order to make the script work, the <strong>index-#.html<\/strong> file with a gallery should contain these lines of HTML code: <br \/><\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_1.png\" \/> <\/p> <p>The <strong>&lt;head&gt;<\/strong> section of the <strong>index-#.html<\/strong> file contains these lines of code that initialize the script functionality with basic values:<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_2.png\" \/> <\/p> <p>First we show the first \u2018accordion\u2019 element, setting <strong>.active<\/strong> class for header element (<strong>&lt;dt&gt;<\/strong> tag) and applying <strong>.show()<\/strong> method for content element (<strong>&lt;dd&gt;<\/strong> tag):<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_3.png\" \/> <\/p> <p>The rest of the coding makes \u2018accordion\u2019 panels to animate when panel titles (<strong>&lt;dt&gt;<\/strong> tags) are clicked:<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_4.png\" \/> <\/p> <p> <strong>HTML<\/strong> <br \/>Below you can see general HTML script representation:<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_5.png\" \/> <\/p> <p>The \u2018accordion\u2019 is formed by a list (<strong>&lt;dl&gt;<\/strong> tag) with <strong>.accordion<\/strong> class. <br \/>In order to add another \u2018accordion\u2019 element you will just need to add the following HTML code construction:<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_6.png\" \/> <\/p> <p> <strong>CSS<\/strong> <br \/>You can find script related stylesheet in the main <strong>style.css<\/strong> file.<\/p> <p> <img alt=\"\" src=\"\/wp-content\/uploads\/2011\/03\/\/jquery\/accordion\/acc_3_7.png\" \/> <\/p>","protected":false},"excerpt":{"rendered":"<p>This is an &#8220;Accordion&#8221; Script. So-called &#8220;Accordion&#8221; is a drop-down panel that holds some additional content. JavaScript In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code: The &lt;head&gt; section of the index-#.html file contains these lines of code that initialize the script functionality with [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[271],"tags":[881,813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1775"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=1775"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/1775\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=1775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=1775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}