<div class="demo-preview-block"> <h5>Multiple sections can be open at the same time</h5> <div class="mdl-accordion-group"> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label">Panel 1<i class="material-icons indicator right">chevron_right</i></label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label">Panel 2<i class="material-icons indicator right">chevron_right</i></label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label">Panel 3<i class="material-icons indicator right">chevron_right</i></label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="demo-preview-block sample"> <h5>Only one section is open</h5> <div class="mdl-accordion-group mdl-accordion--radio-type mdl-js-ripple-effect"> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 1</label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 2</label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label"><i class="material-icons indicator">chevron_right</i>Panel 37</label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> <div class="demo-preview-block"> <h5>Advanced Panel-Header</h5> <div class="mdl-accordion-group"> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label with-toolbar">Panel 1 <span class="mdl-accordion__label--stretch"> <i class="mdl-icon material-icons mdl-color-text--accent">3d_rotation</i> <i class="mdl-icon material-icons mdl-color-text--accent">accessibility</i> <i class="mdl-icon material-icons mdl-color-text--accent">account_balance</i> </span> <i class="material-icons indicator">chevron_right</i></label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label">Panel 2<span class="sample">Text in span</span> <i class="material-icons indicator">chevron_right</i> </label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eligendi nulla illo culpa ab in at adipisci eveniet id itaque maxime soluta recusandae doloribus laboriosam dignissimos est aut cupiditate delectus.</p> </div> </div> <div class="mdl-accordion mdl-js-accordion mdl-js-ripple-effect"> <label class="mdl-accordion__label"> <i class="material-icons indicator">loop</i> Panel 3 </label> <div class="mdl-accordion--content"> <h5 class="mdl-accordion--header">Header</h5> <p class="mdl-accordion--body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div>