jquery realizes the accordion special effect _jquery with the glass streamer texture

jquery realization with glass streamer texture of the accordion effect is a JQUERY+CSS3 based on the realization of the glass streamer texture of the accordion effect, to share with you, specific as follows

Effect Chart:

The specific code is as follows:

HTML code:

<section class= "Strips" > <article class= "Strips__strip" > <div class= "strip__content" > &L T;H1 class= "Strip__title" data-name= "Lorem" >Awesome 

JS code:

      var Expand = function () {var tile = $ ('. Strips__strip ');
      var Tilelink = $ ('. Strips__strip > Strip__content ');
      var tiletext = Tilelink.find ('. Strip__inner-text ');
      var stripclose = $ ('. Strip__close ');
      var expanded = false;
        var open = function () {var tile = $ (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;
      }
      };
          var close = 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;
      }
      };
        var bindactions = function () {Tilelink.on (' click ', open);
      Stripclose.on (' click ', close);
      };
      var init = function () {bindactions ();
      };
    return {init:init};
    }(); Expand.init ();

Hopefully this article will inspire you and help you learn more about jquery programming.