Accordion

                
                
        <div class="d-md-flex accordion-styles">
            <div class="accordion-style-1 w-100 mr-5">
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-1" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-1">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-2" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-2">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-3" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-3">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-4" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-4">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>                
            </div>
            <div class="accordion-style-1 w-100 mt-3 mt-md-0">
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-5" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-5">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-6" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-6">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-7" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-7">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>                
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-1-collapse-8" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                    </div>
                    <div class="collapse" id="style-1-collapse-8">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                Copy to clipboard
            

                
                    
        <div class="d-md-flex accordion-styles">
            <div class="accordion-style-2 w-100">
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-1" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-1">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-2" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-2">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-3" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-3">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>              
            </div>
            <div class="accordion-style-2 w-100 mt-3 mt-md-0">
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-4" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-4">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>  
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-5" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-5">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>
                <!-- Accordion Item -->
                <div class="accordion-item">
                    <div class="accordion-heading">
                        <p type="button" data-toggle="collapse" data-target="#style-2-collapse-6" aria-expanded="false" aria-controls="collapseExample">Frequently Asked Question & Answers?</p>
                    </div>
                    <div class="collapse" id="style-2-collapse-6">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                        </div>
                    </div>
                </div>               
            </div>
        </div>
                    Copy to clipboard
                

                
                    
        <div class="accordion-style-3 accordion-styles">
            <!-- Accordion Item -->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <p type="button" data-toggle="collapse" data-target="#style-3-collapse-1" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                </div>
                <div class="collapse" id="style-3-collapse-1">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                    </div>
                </div>
            </div>
            <!-- Accordion Item -->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <p type="button" data-toggle="collapse" data-target="#style-3-collapse-2" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                </div>
                <div class="collapse" id="style-3-collapse-2">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                    </div>
                </div>
            </div>          
        </div>
                    Copy to clipboard
                

                
                    
        <div class="accordion-style-4 accordion-styles">
            <!-- Accordion Item -->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <p type="button" data-toggle="collapse" data-target="#style-4-collapse-1" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                </div>
                <div class="collapse" id="style-4-collapse-1">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                    </div>
                </div>
            </div>
            <!-- Accordion Item -->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <p type="button" data-toggle="collapse" data-target="#style-4-collapse-2" aria-expanded="false" aria-controls="collapseExample">Lorem Ipsum Dolor Sit Amet?</p>
                </div>
                <div class="collapse" id="style-4-collapse-2">
                    <div class="accordion-body">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat nisi pariatur distinctio magnam dolorum quae amet non ipsam beatae aliquam.</p>
                    </div>
                </div>
            </div>          
        </div>
                    Copy to clipboard