{"id":11699,"date":"2016-02-17T17:37:43","date_gmt":"2016-02-17T17:37:43","guid":{"rendered":"http:\/\/divisoup.com\/?page_id=11699"},"modified":"2019-05-05T07:35:40","modified_gmt":"2019-05-05T07:35:40","slug":"accordion-image-slider-menu-demo","status":"publish","type":"page","link":"https:\/\/www.chochoindustry.com\/en\/accordion-image-slider-menu-demo\/","title":{"rendered":"Accordion Image Slider Menu Demo"},"content":{"rendered":"

[et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”section” _builder_version=”3.22.3″ background_color=”#eaeaea” custom_padding_tablet=”50px|0|50px|0″ transparent_background=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”off” column_padding_mobile=”on” parallax_method_1=”off” admin_label=”row” module_class=” et_pb_row_fullwidth” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”89%” width_tablet=”80%” width_last_edited=”on|desktop” max_width=”89%” max_width_tablet=”80%” max_width_last_edited=”on|desktop” make_fullwidth=”on” use_custom_width=”off” width_unit=”on”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_code admin_label=”Code” module_class=”ds-container” _builder_version=”3.22.5″ custom_css_main_element=”\/*———- %91Accordion Image Slider Menu%93 ———-*\/||||.ds-container {||\twidth: 1000px;||\tmargin: 20px auto;||\toverflow: hidden;||\tbox-shadow: 1px 1px 4px rgba(0,0,0,0.5);||\tborder: 1px solid rgba(255,255,255,1);||}||||.ds-container figure {|| position: absolute;||\ttop: 0 !important;||\tleft: 100px; \/* width of visible piece *\/||\tmargin: 0;||\twidth: 500px;|| box-shadow: 0 0 0 1px rgba(255,255,255,0.6);|| transition: all 0.3s ease-in-out;||}||||.ds-container > figure {|| position: relative;||\tleft: 0 !important;||}||||.ds-container img {||\tdisplay: block;||\twidth: 100%;||}||||.ds-container input {||\tposition: absolute;||\ttop: 0;||\tleft: 0;||\twidth: 100px; \/* just cover visible part *\/||\theight: 100%;||\tcursor: pointer;||\tborder: 0;||\tpadding: 0;|| opacity: 0;||\tz-index: 100;||\t-webkit-appearance: none;||\t-moz-appearance: none;||\tappearance: none;||}||||.ds-container input:checked{||\twidth: 5px;||\tleft: auto;||\tright: 0px;||}||.ds-container input:checked ~ figure {|| left: 500px;|| transition: all 0.7s ease-in-out;||}||||.ds-container figcaption {||\twidth: 100%;||\theight: 100%;||\tbackground: rgba(87, 73, 81, 0.1);||\tposition: absolute;||\ttop: 0px;|| transition: all 0.2s linear;||}||||.ds-container figcaption span {||\tposition: absolute;||\ttop: 80%;||\tmargin-top: -30px;||\tright: 20px;||\tleft: 20px;||\toverflow: hidden;||\ttext-align: center;||\tbackground: rgba(87, 73, 81, 0.3);||\tborder: 1px solid #fff;||\tline-height: 20px;||\tfont-size: 20px;|| opacity: 0;||\ttext-transform: uppercase;||\tletter-spacing: 8px;||\tfont-weight: 800;||\tpadding: 30px;||\tcolor: #fff;||\ttext-shadow: 1px 1px 1px rgba(0,0,0,0.1);||}||||.ds-container figcaption span:hover {||\tbackground: rgba(255, 255, 255, 0.3);||\tcolor: #000;||\tborder: 1px solid #000;||\ttext-shadow: 1px 1px 1px rgba(0,0,0,0.1);||}||||.ds-container input:checked + figcaption,||.ds-container input:checked:hover + figcaption{||\tbackground: rgba(87, 73, 81, 0);||}||||.ds-container input:checked + figcaption span {|| transition: all 0.4s ease-in-out 0.5s;||\topacity: 1;||\ttop: 88%; \/*placement of title link*\/||}||||.ds-container #ds-selector-last:checked + figcaption span {||\ttransition-delay: 0.3s;||}||||.ds-container input:hover + figcaption {||\tbackground: rgba(87, 73, 81, 0.03);||}||||.ds-container input:checked ~ figure input{|| z-index: 1;||}||||@media screen and (max-width: 1024px) {|| .ds-container { ||\t\twidth: 740px; ||\t}||\t||\t.ds-container figure { ||\t\tleft: 80px; ||\t\twidth: 340px; ||\t}||\t||\t.ds-container input { ||\t\twidth: 80px; ||\t}||\t||\t.ds-container input:checked ~ figure { ||\t\tleft: 340px; ||\t}||\t||\t.ds-container figcaption span { ||\t\tfont-size: 18px; ||\t}||\t||\t.ds-container input:checked + figcaption span {||\t\ttop: 82%; \/*placement of title link*\/||\t}||}||||@media screen and (max-width: 768px) {|| .ds-container { ||\t\twidth: 540px; ||\t}||\t||\t.ds-container figure { ||\t\tleft: 50px; ||\t\twidth: 290px; ||\t}||\t||\t.ds-container input { ||\t\twidth: 50px; ||\t}||\t||\t.ds-container input:checked ~ figure { ||\t\tleft: 290px; ||\t}||\t||\t.ds-container figcaption span { ||\t\tfont-size: 16px; ||\t}||\t||\t.ds-container input:checked + figcaption span {||\t\ttop: 80%; \/*placement of title link*\/||\t}||}||||@media screen and (max-width: 520px) {|| .ds-container { ||\t\twidth: 300px; ||\t}||\t||\t.ds-container figure { ||\t\tleft: 30px; ||\t\twidth: 150px; ||\t}||\t||\t.ds-container input { ||\t\twidth: 30px; ||\t}||\t||\t.ds-container input:checked ~ figure { ||\t\tleft: 150px; ||\t}||\t||\t.ds-container figcaption span { ||\t\tfont-size: 12px; ||\t\tletter-spacing: 2px; ||\t\tpadding: 10px; ||\t\tmargin-top: -20px; ||\t} ||\t||\t.ds-container input:checked + figcaption span {||\t\ttop: 77%; \/*placement of title link*\/||\t}||||}||||@media screen and (max-width: 320px) {|| .ds-container { ||\t\twidth: 260px; ||\t}||\t||\t.ds-container figure { ||\t\tleft: 26px; ||\t\twidth: 130px; ||\t}||\t||\t.ds-container input { ||\t\twidth: 26px; ||\t}||\t||\t.ds-container input:checked ~ figure { ||\t\tleft: 130px; ||\t}||\t||\t.ds-container figcaption span { ||\t\tfont-size: 10px; ||\t\tletter-spacing: 2px; ||\t\tpadding: 10px; ||\t\tmargin-top: -20px; ||\t} ||\t||\t.ds-container input:checked + figcaption span {||\t\ttop: 77%; \/*placement of title link*\/||\t}||||}”]<\/p>\n

\"Children\"
Children<\/span><\/a><\/figcaption>
\"Newborn\"
Newborn<\/span><\/a><\/figcaption>
\"Pets\"
Pets<\/span><\/a><\/figcaption>
\"Weddings\"
Weddings<\/span><\/a><\/figcaption>
\"Fashion\"
Fashion<\/span><\/a><\/figcaption>
\"Food\"
Food<\/span><\/a><\/figcaption><\/figure>\n<\/figure>\n<\/figure>\n<\/figure>\n<\/figure>\n<\/figure>\n<\/figure>\n

[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

[et_pb_section fb_built=”1″ custom_padding_last_edited=”on|desktop” admin_label=”section” _builder_version=”3.22.3″ background_color=”#eaeaea” custom_padding_tablet=”50px|0|50px|0″ transparent_background=”off” padding_mobile=”off” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”off” column_padding_mobile=”on” parallax_method_1=”off” admin_label=”row” module_class=” et_pb_row_fullwidth” _builder_version=”3.22.3″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” width=”89%” width_tablet=”80%” width_last_edited=”on|desktop” max_width=”89%” max_width_tablet=”80%” max_width_last_edited=”on|desktop” make_fullwidth=”on” use_custom_width=”off” width_unit=”on”][et_pb_column type=”4_4″ _builder_version=”3.0.47″][et_pb_code admin_label=”Code” module_class=”ds-container” _builder_version=”3.22.5″ custom_css_main_element=”\/*———- %91Accordion Image Slider Menu%93 ———-*\/||||.ds-container {|| width: 1000px;|| margin: 20px auto;|| overflow: hidden;|| box-shadow: 1px 1px 4px rgba(0,0,0,0.5);|| […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":""},"_links":{"self":[{"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/pages\/11699"}],"collection":[{"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/comments?post=11699"}],"version-history":[{"count":2,"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/pages\/11699\/revisions"}],"predecessor-version":[{"id":13160,"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/pages\/11699\/revisions\/13160"}],"wp:attachment":[{"href":"https:\/\/www.chochoindustry.com\/en\/wp-json\/wp\/v2\/media?parent=11699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}