Based on jquery accordion with glass streamer texture

Based on the jquery accordion with glass streamer texture effect. This is a JQUERY+CSS3-based accordion effect with a glass streamer texture. As follows:

Online preview Source Download

The implemented code.

HTML code:

< Sectionclass= "strips">      <articleclass= "Strips__strip">          <Divclass= "Strip__content">              <H1class= "Strip__title"Data-name= "Lorem">Awesome</H1>          </Div>      </article>      <articleclass= "Strips__strip">          <Divclass= "Strip__content">              <H1class= "Strip__title"Data-name= "Ipsum">Words</H1>              <Divclass= "Strip__inner-text">                  <H2>Ettrics</H2>                   <Scriptsrc= "Http://www.w2bc.com/scripts/2bc/_gg_980_90.js"type= "Text/javascript"></Script>                   <P>                      <ahref="#"Target= "_blank"><Iclass= "fa fa-qq"></I></a>                  </P>              </Div>          </Div>      </article>      <articleclass= "Strips__strip">          <Divclass= "Strip__content">              <H1class= "Strip__title"Data-name= "Dolor">Go</H1>              <Divclass= "Strip__inner-text">                  <H2>Ettrics</H2>                  <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P>                  <P>                      <ahref="#"Target= "_blank"><Iclass= "fa Fa-weibo"></I></a>                  </P>              </Div>          </Div>      </article>      <articleclass= "Strips__strip">          <Divclass= "Strip__content">              <H1class= "Strip__title"Data-name= "Sit">Inside</H1>              <Divclass= "Strip__inner-text">                  <H2>Ettrics</H2>                  <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P>                  <P>                      <ahref="#"Target= "_blank"><Iclass= "fa fa-weixin"></I></a>                  </P>              </Div>          </Div>      </article>      <articleclass= "Strips__strip">          <Divclass= "Strip__content">              <H1class= "Strip__title"Data-name= "Amet">Here</H1>              <Divclass= "Strip__inner-text">                  <H2>Ettrics</H2>                  <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis Corrupti Quo ea aliquid! Repellendus Numquam Quo, voluptate. Suscipit soluta omnis quibusdam facilis, Illo voluptates odit!</P>                  <P>                      <ahref="#"Target= "_blank"><Iclass= "fa fa-leaf"></I></a>                  </P>              </Div>          </Div>      </article>      <Iclass= "fa fa-close strip__close"></I>  </ Section>

JS Code:

varExpand =function () {            varTile = $ ('. Strips__strip ')); varTilelink = $ ('. Strips__strip >. strip__content '); varTiletext = Tilelink.find ('. Strip__inner-text ')); varStripclose = $ ('. Strip__close ')); varExpanded =false; varOpen =function () {                varTile = $ ( This). parent (); if(!expanded) {Tile.addclass (' Strips__strip--expanded '); Tiletext.css (' Transition ', ' all. 6s 1s cubic-bezier (0.23, 1, 0.32, 1) '); Stripclose.addclass (' Strip__close--show '); Stripclose.css (' Transition ', ' all. 6s 1s cubic-bezier (0.23, 1, 0.32, 1) '); Expanded=true;            }            }; varClose =function () {                if(expanded) {Tile.removeclass (' Strips__strip--expanded '); Tiletext.css (' Transition ', ' all 0.15s 0 cubic-bezier (0.23, 1, 0.32, 1) '); Stripclose.removeclass (' Strip__close--show '); Stripclose.css (' Transition ', ' all 0.2s 0s cubic-bezier (0.23, 1, 0.32, 1) '); Expanded=false;            }            }; varBindactions =function() {Tilelink.on (' Click ', open); Stripclose.on (' Click ', close);            }; varinit =function() {bindactions ();            }; return{init:init};        }(); Expand.init ();

via:http://www.w2bc.com/article/58246

Based on jquery accordion with glass streamer texture