微件:Semicollapse

<style>

   .template-semicollapse {
       display: block;
   }

   .template-semicollapse-content {
       overflow-y: hidden;
       max-height: 400px;
       padding: 1px;
       -webkit-mask-image: linear-gradient(black 80%, transparent);
       mask-image: linear-gradient(black 80%, transparent);
   }

   .template-semicollapse-button {
       display: block;
       width: 200px;
       margin: auto;
       margin-top: 8px;
       border-radius: 4px;
       background-color: #2f2f2f;
       box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
       transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
       color: white;
       text-align: center;
       padding: 4px;
       font-size: 20px;
       cursor: pointer;
   }

   .template-semicollapse-button:hover {
       background: #585858;
       box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
       text-decoration: none;
   }

</style> <script type="text/javascript">

   (window.RLQ = window.RLQ || []).push(["jquery", function () {
       $('.template-semicollapse').on('click','.template-semicollapse-button',function(event){
           var parent = $(event.delegateTarget);
           var target = $(event.currentTarget);
           parent.find('.template-semicollapse-content').addClass('template-semicollapse-uncollapsed').removeClass('template-semicollapse-content').removeAttr("style");
           target.css('display','none');
       });
   }]);

</script>