{"id":231636,"date":"2019-10-19T09:55:11","date_gmt":"2019-10-19T09:55:11","guid":{"rendered":"https:\/\/themes.kerjemtec.com\/code-snippets\/?page_id=231636"},"modified":"2019-10-19T09:55:11","modified_gmt":"2019-10-19T09:55:11","slug":"responsive-accordion-slider","status":"publish","type":"page","link":"https:\/\/themes.kerjemtec.com\/code-snippets\/responsive-accordion-slider\/","title":{"rendered":"Responsive Accordion Slider"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;3.29.1&#8243; fb_built=&#8221;1&#8243; _i=&#8221;0&#8243; _address=&#8221;0&#8243;][et_pb_row use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;1&#8243; _builder_version=&#8221;3.29.3&#8243; width=&#8221;100%&#8221; max_width=&#8221;800px&#8221; height=&#8221;400px&#8221; height_tablet=&#8221;700px&#8221; height_phone=&#8221;700px&#8221; height_last_edited=&#8221;on|desktop&#8221; _i=&#8221;0&#8243; _address=&#8221;0.0&#8243;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.29.3&#8243; custom_css_main_element=&#8221;display:flex;||flex-direction: row;||align-items:center;||height: 100%;&#8221; custom_css_main_element_last_edited=&#8221;on|tablet&#8221; custom_css_main_element_tablet=&#8221;flex-direction: column;&#8221; _i=&#8221;0&#8243; _address=&#8221;0.0.0&#8243;][et_pb_blurb title=&#8221;Baking is Fun!&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;%%11%%&#8221; icon_color=&#8221;#ffffff&#8221; icon_placement=&#8221;left&#8221; font_icon_tablet=&#8221;%%8%%&#8221; font_icon_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;3.29.3&#8243; header_font=&#8221;Poppins|600|||||||&#8221; header_text_color=&#8221;rgba(0,0,0,0)&#8221; header_font_size=&#8221;22px&#8221; body_text_color=&#8221;rgba(0,0,0,0)&#8221; background_image=&#8221;https:\/\/themes.kerjemtec.com\/code-snippets\/wp-content\/uploads\/sites\/19\/2019\/10\/cake-12-1.jpg&#8221; background_position=&#8221;center_left&#8221; height=&#8221;100%&#8221; height_tablet=&#8221;100%&#8221; height_phone=&#8221;100%&#8221; height_last_edited=&#8221;on|phone&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; hover_transition_duration=&#8221;400ms&#8221; hover_transition_speed_curve=&#8221;linear&#8221; background_last_edited=&#8221;off|desktop&#8221; custom_css_main_element=&#8221;flex:1;||position: relative !important;||transition: flex 800ms !important;&#8221; custom_css_blurb_content=&#8221;position: absolute !important;||width: 280px;||padding: 20px;||transition: color 400ms;&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_horizontal=&#8221;-12px&#8221; box_shadow_vertical=&#8221;0px&#8221; locked=&#8221;off&#8221; font_icon__hover_enabled=&#8221;on|desktop&#8221; font_icon__hover=&#8221;%%45%%&#8221; background__hover_enabled=&#8221;on|hover&#8221; use_background_color_gradient__hover=&#8221;on&#8221; background_color_gradient_start__hover=&#8221;#3e215b&#8221; background_color_gradient_end__hover=&#8221;rgba(0,0,0,0)&#8221; background_color_gradient_direction__hover=&#8221;90deg&#8221; background_color_gradient_overlays_image__hover=&#8221;on&#8221; header_text_color__hover_enabled=&#8221;on|hover&#8221; header_text_color__hover=&#8221;#ffffff&#8221; body_text_color__hover_enabled=&#8221;on|hover&#8221; body_text_color__hover=&#8221;#ffffff&#8221; custom_css_main_element__hover_enabled=&#8221;on|hover&#8221; custom_css_main_element__hover=&#8221;flex:5;&#8221; custom_css_blurb_content_last_edited=&#8221;on|tablet&#8221; custom_css_blurb_content_tablet=&#8221;width: 100%;||height: 100%;||position: relative !important;&#8221; _i=&#8221;0&#8243; _address=&#8221;0.0.0.0&#8243;]<\/p>\n<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Baking is Fun!&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;%%11%%&#8221; icon_color=&#8221;#ffffff&#8221; icon_placement=&#8221;left&#8221; font_icon_tablet=&#8221;%%8%%&#8221; font_icon_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;3.29.3&#8243; header_font=&#8221;Poppins|600|||||||&#8221; header_text_color=&#8221;rgba(0,0,0,0)&#8221; header_font_size=&#8221;22px&#8221; body_text_color=&#8221;rgba(0,0,0,0)&#8221; background_image=&#8221;https:\/\/themes.kerjemtec.com\/code-snippets\/wp-content\/uploads\/sites\/19\/2019\/10\/cake-06.jpg&#8221; background_position=&#8221;center_left&#8221; height=&#8221;100%&#8221; height_tablet=&#8221;100%&#8221; height_phone=&#8221;100%&#8221; height_last_edited=&#8221;on|desktop&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; hover_transition_duration=&#8221;400ms&#8221; hover_transition_speed_curve=&#8221;linear&#8221; background_last_edited=&#8221;off|desktop&#8221; custom_css_main_element=&#8221;flex:1;||position: relative !important;||transition: flex 800ms !important;&#8221; custom_css_blurb_content=&#8221;position: absolute !important;||width: 280px;||padding: 20px;||transition: color 400ms;&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_horizontal=&#8221;-12px&#8221; box_shadow_vertical=&#8221;0px&#8221; locked=&#8221;off&#8221; font_icon__hover_enabled=&#8221;on|desktop&#8221; font_icon__hover=&#8221;%%45%%&#8221; background__hover_enabled=&#8221;on|hover&#8221; use_background_color_gradient__hover=&#8221;on&#8221; background_color_gradient_start__hover=&#8221;#3e215b&#8221; background_color_gradient_end__hover=&#8221;rgba(0,0,0,0)&#8221; background_color_gradient_direction__hover=&#8221;90deg&#8221; background_color_gradient_overlays_image__hover=&#8221;on&#8221; header_text_color__hover_enabled=&#8221;on|hover&#8221; header_text_color__hover=&#8221;#ffffff&#8221; body_text_color__hover_enabled=&#8221;on|hover&#8221; body_text_color__hover=&#8221;#ffffff&#8221; custom_css_main_element__hover_enabled=&#8221;on|hover&#8221; custom_css_main_element__hover=&#8221;flex:5;&#8221; custom_css_blurb_content_last_edited=&#8221;on|tablet&#8221; custom_css_blurb_content_tablet=&#8221;width: 100%;||height: 100%;||position: relative !important;&#8221; _i=&#8221;1&#8243; _address=&#8221;0.0.0.1&#8243;]<\/p>\n<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Baking is Fun!&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;%%11%%&#8221; icon_color=&#8221;#ffffff&#8221; icon_placement=&#8221;left&#8221; font_icon_tablet=&#8221;%%8%%&#8221; font_icon_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;3.29.1&#8243; header_font=&#8221;Poppins|600|||||||&#8221; header_text_color=&#8221;rgba(0,0,0,0)&#8221; header_font_size=&#8221;22px&#8221; body_text_color=&#8221;rgba(0,0,0,0)&#8221; background_image=&#8221;https:\/\/themes.kerjemtec.com\/code-snippets\/wp-content\/uploads\/sites\/19\/2019\/10\/cake-11.jpg&#8221; background_position=&#8221;center_left&#8221; height=&#8221;100%&#8221; height_tablet=&#8221;100%&#8221; height_phone=&#8221;100%&#8221; height_last_edited=&#8221;on|phone&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; hover_transition_duration=&#8221;400ms&#8221; hover_transition_speed_curve=&#8221;linear&#8221; background_last_edited=&#8221;off|desktop&#8221; custom_css_main_element=&#8221;flex:1;||position: relative !important;||transition: flex 800ms !important;&#8221; custom_css_blurb_content=&#8221;position: absolute !important;||width: 280px;||padding: 20px;||transition: color 400ms;&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_horizontal=&#8221;-12px&#8221; box_shadow_vertical=&#8221;0px&#8221; locked=&#8221;off&#8221; font_icon__hover_enabled=&#8221;on|desktop&#8221; font_icon__hover=&#8221;%%45%%&#8221; background__hover_enabled=&#8221;on|hover&#8221; use_background_color_gradient__hover=&#8221;on&#8221; background_color_gradient_start__hover=&#8221;#3e215b&#8221; background_color_gradient_end__hover=&#8221;rgba(0,0,0,0)&#8221; background_color_gradient_direction__hover=&#8221;90deg&#8221; background_color_gradient_overlays_image__hover=&#8221;on&#8221; header_text_color__hover_enabled=&#8221;on|hover&#8221; header_text_color__hover=&#8221;#ffffff&#8221; body_text_color__hover_enabled=&#8221;on|hover&#8221; body_text_color__hover=&#8221;#ffffff&#8221; custom_css_main_element__hover_enabled=&#8221;on|hover&#8221; custom_css_main_element__hover=&#8221;flex:5;&#8221; custom_css_blurb_content_last_edited=&#8221;on|tablet&#8221; custom_css_blurb_content_tablet=&#8221;width: 100%;||height: 100%;||position: relative !important;&#8221; _i=&#8221;2&#8243; _address=&#8221;0.0.0.2&#8243;]<\/p>\n<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Baking is Fun!&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;%%11%%&#8221; icon_color=&#8221;#ffffff&#8221; icon_placement=&#8221;left&#8221; font_icon_tablet=&#8221;%%8%%&#8221; font_icon_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;3.29.1&#8243; header_font=&#8221;Poppins|600|||||||&#8221; header_text_color=&#8221;rgba(0,0,0,0)&#8221; header_font_size=&#8221;22px&#8221; body_text_color=&#8221;rgba(0,0,0,0)&#8221; background_image=&#8221;https:\/\/themes.kerjemtec.com\/code-snippets\/wp-content\/uploads\/sites\/19\/2019\/10\/cake-05.jpg&#8221; background_position=&#8221;center_left&#8221; height=&#8221;100%&#8221; height_tablet=&#8221;100%&#8221; height_phone=&#8221;100%&#8221; height_last_edited=&#8221;on|phone&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; hover_transition_duration=&#8221;400ms&#8221; hover_transition_speed_curve=&#8221;linear&#8221; background_last_edited=&#8221;off|desktop&#8221; custom_css_main_element=&#8221;flex:1;||position: relative !important;||transition: flex 800ms !important;&#8221; custom_css_blurb_content=&#8221;position: absolute !important;||width: 280px;||padding: 20px;||transition: color 400ms;&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_horizontal=&#8221;-12px&#8221; box_shadow_vertical=&#8221;0px&#8221; locked=&#8221;off&#8221; font_icon__hover_enabled=&#8221;on|desktop&#8221; font_icon__hover=&#8221;%%45%%&#8221; background__hover_enabled=&#8221;on|hover&#8221; use_background_color_gradient__hover=&#8221;on&#8221; background_color_gradient_start__hover=&#8221;#3e215b&#8221; background_color_gradient_end__hover=&#8221;rgba(0,0,0,0)&#8221; background_color_gradient_direction__hover=&#8221;90deg&#8221; background_color_gradient_overlays_image__hover=&#8221;on&#8221; header_text_color__hover_enabled=&#8221;on|hover&#8221; header_text_color__hover=&#8221;#ffffff&#8221; body_text_color__hover_enabled=&#8221;on|hover&#8221; body_text_color__hover=&#8221;#ffffff&#8221; custom_css_main_element__hover_enabled=&#8221;on|hover&#8221; custom_css_main_element__hover=&#8221;flex:5;&#8221; custom_css_blurb_content_last_edited=&#8221;on|tablet&#8221; custom_css_blurb_content_tablet=&#8221;width: 100%;||height: 100%;||position: relative !important;&#8221; _i=&#8221;3&#8243; _address=&#8221;0.0.0.3&#8243;]<\/p>\n<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<p>[\/et_pb_blurb][et_pb_blurb title=&#8221;Baking is Fun!&#8221; use_icon=&#8221;on&#8221; font_icon=&#8221;%%11%%&#8221; icon_color=&#8221;#ffffff&#8221; icon_placement=&#8221;left&#8221; font_icon_tablet=&#8221;%%8%%&#8221; font_icon_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;3.29.1&#8243; header_font=&#8221;Poppins|600|||||||&#8221; header_text_color=&#8221;rgba(0,0,0,0)&#8221; header_font_size=&#8221;22px&#8221; body_text_color=&#8221;rgba(0,0,0,0)&#8221; background_image=&#8221;https:\/\/themes.kerjemtec.com\/code-snippets\/wp-content\/uploads\/sites\/19\/2019\/10\/cake-10.jpg&#8221; background_position=&#8221;center_left&#8221; height=&#8221;100%&#8221; height_tablet=&#8221;100%&#8221; height_phone=&#8221;100%&#8221; height_last_edited=&#8221;on|phone&#8221; overflow-x=&#8221;hidden&#8221; overflow-y=&#8221;hidden&#8221; hover_transition_duration=&#8221;400ms&#8221; hover_transition_speed_curve=&#8221;linear&#8221; background_last_edited=&#8221;off|desktop&#8221; custom_css_main_element=&#8221;flex:1;||position: relative !important;||transition: flex 800ms !important;&#8221; custom_css_blurb_content=&#8221;position: absolute !important;||width: 280px;||padding: 20px;||transition: color 400ms;&#8221; box_shadow_style=&#8221;preset3&#8243; box_shadow_horizontal=&#8221;-12px&#8221; box_shadow_vertical=&#8221;0px&#8221; locked=&#8221;off&#8221; font_icon__hover_enabled=&#8221;on|desktop&#8221; font_icon__hover=&#8221;%%45%%&#8221; background__hover_enabled=&#8221;on|hover&#8221; use_background_color_gradient__hover=&#8221;on&#8221; background_color_gradient_start__hover=&#8221;#3e215b&#8221; background_color_gradient_end__hover=&#8221;rgba(0,0,0,0)&#8221; background_color_gradient_direction__hover=&#8221;90deg&#8221; background_color_gradient_overlays_image__hover=&#8221;on&#8221; header_text_color__hover_enabled=&#8221;on|hover&#8221; header_text_color__hover=&#8221;#ffffff&#8221; body_text_color__hover_enabled=&#8221;on|hover&#8221; body_text_color__hover=&#8221;#ffffff&#8221; custom_css_main_element__hover_enabled=&#8221;on|hover&#8221; custom_css_main_element__hover=&#8221;flex:5;&#8221; custom_css_blurb_content_last_edited=&#8221;on|tablet&#8221; custom_css_blurb_content_tablet=&#8221;width: 100%;||height: 100%;||position: relative !important;&#8221; _i=&#8221;4&#8243; _address=&#8221;0.0.0.4&#8243;]<\/p>\n<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<p>[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The accordion slider is a fun and engaging way to display content in a small space. Accordion sliders usually consist of multiple elements (or panels) stacked horizontally like the folds of a curtain. And when you hover over one of the panels, it expands to reveal content as the other accordion panels contract. This is where we get the accordion type effect of expanding and contracting.<\/p>\n","protected":false},"author":1,"featured_media":231638,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-231636","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/comments?post=231636"}],"version-history":[{"count":2,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231636\/revisions"}],"predecessor-version":[{"id":231646,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/pages\/231636\/revisions\/231646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/media\/231638"}],"wp:attachment":[{"href":"https:\/\/themes.kerjemtec.com\/code-snippets\/wp-json\/wp\/v2\/media?parent=231636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}