{"id":312,"date":"2017-02-19T04:33:30","date_gmt":"2017-02-19T04:33:30","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=312"},"modified":"2018-05-12T05:43:36","modified_gmt":"2018-05-12T05:43:36","slug":"accordion-slider","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/accordion-slider\/","title":{"rendered":"Accordion Slider"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-03918f26bb8617599ff768e2529720ce\">\n#top .av-special-heading.av-av_heading-03918f26bb8617599ff768e2529720ce{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-03918f26bb8617599ff768e2529720ce .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-03918f26bb8617599ff768e2529720ce .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-03918f26bb8617599ff768e2529720ce av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Accordion Slider<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-68pu1c-f97923b81e5323d478fa94de57224dfc hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-62fqdk-4ca65c5efd73be84967d0ebdb400f355 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5wopg0-e62fea44a9596b697406b9ae6623ccdd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The accordion slider is either a full-width element, when placed at the top level of your advanced layout builder canvas or an element that stretches as wide as the parent element,\u00a0when placed inside a column or section.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-4tep4g-9441dc964130a16362f8b6683f90a44d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>View more examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/accordion-slider\/\" target=\"_blank\" rel=\"noopener\">accordion slider element<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-4po9m8-943e7c151557d4c4b1e261dfe5f95e99 hr-default  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4kqpn4-d2b1583376e4a98316d69c2952d6064a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Intro to accordion slider<\/h3>\n<\/div><\/section>\n<div  class='avia-video av-4fs5eg-1c51aac994a3166645550b494ab033b2 avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/vimeo.com\/92506240'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/92506240?app_id=122963&autoplay=0&loop=0&controls=1&muted=0\" width=\"1500\" height=\"844\" frameborder=\"0\" title=\"Intro to the Accordion Slider\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div>\n<div  class='hr av-46ngu8-d917f3ad6c3f0b4b9a32f0480c2748e8 hr-default  avia-builder-el-8  el_after_av_video  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-442pc0-5a7df81fd6f533d5f88b39a2d0dd09d1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>CODE SNIPPETS<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-10  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-3oi7v4-228df5547be71a11b9a61bd60e5a1299 hr-default  avia-builder-el-11  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3mc7zs-0239825c5d92d9ca48fcc57901b075fa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-27t20w-664b318718bd1806bacb82c925f8b634 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-21r548-e64c24faac6faab3d5a5f575727222ab '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>CUSTOMIZATION<\/h2>\n<\/div><\/section>\n<div  class='hr av-1yqhuo-79ab689d0273ab76c780dd0a4f59cc3a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1ruczc-fbff44f1fba075385123957fdf011c78 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overlay and font<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1l4p4w-3475d895b3f014ffaa0f8b564f323565 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the overlay from the accordion slider, we can simply choose to hide the title and the description text. If you would like to keep the title and modify the overlay ( Hide or change the overlay color ), please use the\u00a0CSS code\u00a0below.<\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Accordion slider overlay\r\n\/\/--------------------------------------*\/\r\n\r\n#top .aviaccordion-preview-title-wrap { \r\n    background: transparent;  \r\n}\r\n\r\n\/* Title and excerpt color *\/\r\n#top .aviaccordion-excerpt,\r\n#top .aviaccordion-preview-title h3 {\r\n   color:#000;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-1cl6x4-902ca00f4f097d4384ebe2ffa1e93376 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4ewx4-718b62f92d6e1b0530f7cdd153eafbc1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Fullwidth overlay<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-14dxag-2d7272c49dd555c9ffc388b149f9ad60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the width of the active slider overlay please use the CSS below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7324\" src=\"https:\/\/kriesi.at\/documentation\/enfold-assistance\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth.png\" alt=\"\" width=\"990\" height=\"370\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth.png 990w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth-300x112.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth-768x287.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth-705x263.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth-450x168.png 450w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-vmtxc-0ec026fa0921b92b39d81f86f6b48038 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Accordion slider overlay full-width\r\n\/\/--------------------------------------*\/\r\n\r\n.aviaccordion-active-slide .aviaccordion-preview \r\n{ \r\n    width: 100% !important; \r\n}\r\n#top .aviaccordion-preview-title {    \r\n    padding-left: 30px;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-p9wew-eda23b74bea2cd6aa9b78490664e6901 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-k6jc0-33958bdb7611bc436ed0f720bb45d5d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-feymw-3fb02741bcd8890df7e1d54714a22bd9 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-bwfuo-0450e82dca88bf5baf21f29975e71cea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=XmxsMRUy3EI\"> Accordion Slider Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-312","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":2,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"predecessor-version":[{"id":8300,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/312\/revisions\/8300"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}