{"id":7710,"date":"2011-03-29T02:46:45","date_gmt":"2011-03-29T06:46:45","guid":{"rendered":"http:\/\/info.template-help.com\/?p=7710"},"modified":"2015-09-11T05:25:52","modified_gmt":"2015-09-11T09:25:52","slug":"accordion-4","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/accordion-4.html","title":{"rendered":"\u201cAccordion\u201d-4"},"content":{"rendered":"This is an \u2018Accordion\u2019 Script. So-called \u2018Accordion\u2019 is a drop-down panel that holds some additional content.\r\n<h3>JavaScript<\/h3>\r\nIn order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code:\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_1.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7706\" title=\"accordion_4_1\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_1.jpg\" alt=\"accordion-4-1\" width=\"622\" height=\"15\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/03\/accordion_4_1.jpg 622w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/03\/accordion_4_1-150x4.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/03\/accordion_4_1-300x7.jpg 300w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/a>\r\n\r\nThe  section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_2.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7707\" title=\"accordion_4_2\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_2.jpg\" alt=\"accordion-4-2\" width=\"622\" height=\"145\" \/><\/a>\r\n\r\nIn this block of coding we specify the id of the accordion button &#8211; #link and its actions. When the button is clicked the class link2 is applied to the button, and the action for an element with the id #dropdown_box is triggered.\r\n<h3>HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_3.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7708\" title=\"accordion_4_3\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_3.jpg\" alt=\"accordion-4-3\" width=\"622\" height=\"41\" \/><\/a>\r\n\r\nheader-banner-right &#8211; class defines the height and position when the box with the content is hidden (closed)\r\n#link &#8211; this class is used for the button element\r\n#dropdown_box &#8211; this id should be assigned to a box with the content\r\n<h3>CSS<\/h3>\r\nYou can find script related stylesheet in the main style.css file.\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_4.jpg\"><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7709\" title=\"accordion_4_4\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/03\/accordion_4_4.jpg\" alt=\"accordion-4-4\" width=\"622\" height=\"288\" \/><\/a>","protected":false},"excerpt":{"rendered":"<p>This is an \u2018Accordion\u2019 Script. So-called \u2018Accordion\u2019 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 section of the index-#.html file contains these lines of code that initialize the script functionality with basic [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[271,270],"tags":[881,813],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/7710"}],"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=7710"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/7710\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=7710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=7710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=7710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}