Accordion

                    
    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <h3>Accordion Style 1</h3>
        <div class="accordion-style-1">
            <div class="style-1">
                <p><a aria-expanded="false" data-toggle="collapse" href="#collapseExample1" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
                <div class="collapse" id="collapseExample1">
                    <div class="item">
                        <hr />
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                </div>
            </div>
        </div>

        <div class="style-1">
            <p><a aria-expanded="false" data-toggle="collapse" href="#collapseExample2" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
            <div class="collapse" id="collapseExample2">
                <div class="item">
                <hr />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                </div>
            </div>
        </div>

        <div class="style-1">
            <p><a aria-expanded="false" data-toggle="collapse" href="#collapseExample3" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
            <div class="collapse" id="collapseExample3">
                <div class="item">
                    <hr />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                </div>
            </div>
        </div>
    </div>        
                    
                Copy to clipboard
                

                    
    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <h3>Accordion Style 4</h3>
        
        <div class="accordion-style-4">
            <div class="style-4">
                <p><a aria-expanded="false" data-toggle="collapse" href="#style-4-1" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
        
                <div class="collapse" id="style-4-1">
                    <div class="item">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                    </div>
                </div>
            </div>
        
            <div class="style-4">
                <p><a aria-expanded="false" data-toggle="collapse" href="#style-4-2" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
        
                <div class="collapse" id="style-4-2">
                    <div class="item">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                    </div>
                </div>
            </div>
        
            <div class="style-4">
                <p><a aria-expanded="false" data-toggle="collapse" href="#style-4-3" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
            
                <div class="collapse" id="style-4-3">
                    <div class="item">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                    </div>
                </div>
            </div>
        
            <div class="style-4">
                <p><a aria-expanded="false" data-toggle="collapse" href="#style-4-4" role="button" title="Title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ?</a></p>
            
                <div class="collapse" id="style-4-4">
                    <div class="item">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus varius interdum. Suspendisse aliquet diam quis sapien varius accumsan non a ex. Sed eget eros egestas libero bibendum semper ac ac lectus. Vivamus maximus tortor eu auctor facilisis. Aenean consequat mollis malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque auctor ut nisi nec tincidunt. Donec eu ante pharetra mauris interdum cursus ac eget eros.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
                    
                Copy to clipboard