{"id":290,"date":"2020-11-27T02:30:00","date_gmt":"2020-11-27T02:30:00","guid":{"rendered":"https:\/\/wshop.fi\/eng\/?p=290"},"modified":"2021-03-23T02:39:02","modified_gmt":"2021-03-23T02:39:02","slug":"basic-jquery-ui-accordion-tutorial","status":"publish","type":"post","link":"https:\/\/wshop.fi\/eng\/basic-jquery-ui-accordion-tutorial\/","title":{"rendered":"jQuery UI Accordion Tutorial: How to Make a Basic jQuery UI Accordion"},"content":{"rendered":"\n

This post is for beginners. \u00a0It shows\u00a0how to make a basic jquery UI accordion.<\/strong>\u00a0We will use a predefined\u00a0jquery ui for the accordion. There is a link to the demo right before the entire code snippet.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n

HTML for Basic jQuery UI Accordion<\/h2>\n\n\n\n
 <!-- begin html for accordion -->\n    <div style=\"width: 360px;\">\n        <div id=\"accordion\">\n            <h3>\n                <a href=\"#\">ASP.NET<\/a><\/h3>\n            <div class=\"\">\n                <h4>\n                    ASP<\/h4>\n                <p>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/asp\/\">ASP stuff<\/a><\/p>\n            <\/div>\n            <h3>\n                <a href=\"#\">CSS<\/a><\/h3>\n            <div>\n                <h4>\n                    CSS<\/h4>\n                <p>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/css\/\">CSS Stuff<\/a><br \/>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/css\/clearfix.html\">CSS Clearfix<\/a>\n                <\/p>\n            <\/div>\n            <h3>\n                <a href=\"#\">Javascript<\/a><\/h3>\n            <div>\n                <h4>\n                    Javascript<\/h4>\n                <p>\n                    javascript<br \/>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/jquery\/\">jQuery<\/a><br \/>\n                    Dojo<br \/>\n                    Backbone<\/p>\n            <\/div>\n        <\/div>\n    <\/div><\/code><\/pre>\n\n\n\n
HTML Code in header<\/h2>\n\n\n\n
The first 2 reference the jQuery library and the jQuery UI library to make the accordion functional. \u00a0The third gets the CSS needed from a theme for the look.<\/p>\n\n\n\n
<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\n<script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/ui\/1.10.2\/jquery-ui.js\"><\/script>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/code.jquery.com\/ui\/1.10.2\/themes\/dark-hive\/jquery-ui.css\" \/><\/code><\/pre>\n\n\n\n
jQuery for Accordion<\/h2>\n\n\n\n
Here is the jQuery code to make the accordion work.  Several parameters are included.  Hopefully this will help you tweak as needed <\/p>\n\n\n\n
\":)\"\/<\/figure>\n\n\n\n
  If you need info on more parameters, I would start here first<\/a>, then here<\/a>, then here<\/a>.<\/p>\n\n\n\n
     $(document).ready(\n            function () {\n                $(\"#accordion\").accordion({ header: \"h3\",          \n                    autoheight: false,\n                    active: false,\n                    alwaysOpen: false,\n                    fillspace: false,\n                    collapsible: true,\n            \/\/heightStyle: 'content'   \/\/auto, fill, content\n                });\n            });<\/code><\/pre>\n\n\n\n
View Demo<\/strong><\/a><\/p>\n\n\n\n
The Entire jQuery UI Accordion Code<\/h2>\n\n\n\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<head>\n    <title>Basic jQuery Accordion<\/title>\n    <script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\n    <script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/ui\/1.10.2\/jquery-ui.js\"><\/script>\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/code.jquery.com\/ui\/1.10.2\/themes\/dark-hive\/jquery-ui.css\" \/>\n    <script type=\"text\/javascript\">\n          $(document).ready(\n            function () {\n                $(\"#accordion\").accordion({ header: \"h3\",          \n                    autoheight: false,\n                    active: false,\n                    alwaysOpen: false,\n                    fillspace: false,\n                    collapsible: true,\n                    \/\/heightStyle: content   \/\/auto, fill, content\n                });\n            });\n    <\/script>\n<\/head>\n<body>\n    <script type=\"text\/javascript\" src=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\n    <\/script>\n    <!-- begin html for accordion -->\n    <div style=\"width: 468px;\">\n        <div id=\"accordion\">\n            <h3>\n                <a href=\"#\">ASP.NET<\/a><\/h3>\n            <div class=\"\">\n                <h4>\n                    ASP<\/h4>\n                <p>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/asp\/\">ASP stuff<\/a><\/p>\n            <\/div>\n            <h3>\n                <a href=\"#\">CSS<\/a><\/h3>\n            <div>\n                <h4>\n                    CSS<\/h4>\n                <p>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/css\/\">CSS Stuff<\/a><br \/>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/css\/clearfix.html\">CSS Clearfix<\/a>\n                <\/p>\n            <\/div>\n            <h3>\n                <a href=\"#\">Javascript<\/a><\/h3>\n            <div>\n                <h4>\n                    Javascript<\/h4>\n                <p>\n                    javascript<br \/>\n                    <a href=\"http:\/\/www.surfingsuccess.com\/tag\/jquery\/\">jQuery<\/a><br \/>\n                    Dojo<br \/>\n                    Backbone<\/p>\n            <\/div>\n            <h3>\n                <a href=\"#\">Other<\/a><\/h3>\n            <div>\n                <h4>\n                    Stuff<\/h4>\n                <p>\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n    <!--<\/div>-->\n    <!-- end html for accordion -->\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
This post is for beginners. \u00a0It shows\u00a0how to make a basic jquery UI accordion.\u00a0We will use a predefined\u00a0jquery ui for the accordion. There is a link to the demo right before the entire code snippet. HTML for Basic jQuery UI Accordion HTML Code in header The first 2 reference the jQuery library and the jQuery […]<\/p>\n","protected":false},"author":1,"featured_media":286,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":{"0":"post-290","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-coding"},"_links":{"self":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":2,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":293,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/posts\/290\/revisions\/293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media\/286"}],"wp:attachment":[{"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wshop.fi\/eng\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}