Accordion

        
<section class="accordion-style1">
    <div class="container">
        <div class="accordion" id="accordionPanelsStayOpenExample">
            <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h4>
                </button>
            </h2>
            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                </div>
            </div>
            </div>
            <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h4>
                </button>
            </h2>
            <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                </div>
            </div>
            </div>
            <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h4> 
                </button>
            </h2>
            <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                </div>
            </div>
            </div>
        </div>
    </div>
</section>  
        Copy to clipboard
    

<section class="accordion">
        <div class="container">
        <div class="accordian-2"></div>
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="panelsStayOpen-headingOne-1">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne-1" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne-1">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h3>
                        </button>
                    </h2>
                    <div id="panelsStayOpen-collapseOne-1" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne-1">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="panelsStayOpen-headingTwo-2">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo-2" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo-2">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h3>
                        </button>
                    </h2>
                    <div id="panelsStayOpen-collapseTwo-2" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo-2">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree-3" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree-3">
                        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do?</h3>
                        </button>
                    </h2>
                    <div id="panelsStayOpen-collapseThree-3" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree-3">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed doLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</section>
    Copy to clipboard
    

                    
<section class="accordion-style ">
    <div class="container">
        <div class="accordion-block">
        <h2>Accordian Style 3</h2>
        <div class="accordian-3">
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    <div class="accordian-button-3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-91" aria-expanded="false" aria-controls="panelsStayOpen-91" tabindex="-1">
                            At vero eos et accusamus et iusto odio dignissimos ?                                  
                        </button>
                        <div class="i-accordian-3-icons">
                            <div class="faq-svg svg-plus d-block">
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                    <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M28.85,28.688,12.172,11.673a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L16.646,50.258a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(51.196 -11.246) rotate(90)" fill="#e4a853"></path>
                                </svg>
                            </div>
                            <div class="faq-svg-2 svg-minus d-none">    
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M17.6,22.492.925,5.476a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L5.4,44.062a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(0 25.2) rotate(-90)" fill="#e4a853"></path>
                                </svg>
                            </div>    
                        </div>
                    </div>    
                    <div id="panelsStayOpen-91" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-91" style="">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>         
        <div class="accordian-3">
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    <div class="accordian-button-3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-92" aria-expanded="false" aria-controls="panelsStayOpen-92" tabindex="-1">
                            At vero eos et accusamus et iusto odio dignissimos ?                                 
                        </button>
                        <div class="i-accordian-3-icons">
                            <div class="faq-svg svg-plus d-block">
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                    <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M28.85,28.688,12.172,11.673a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L16.646,50.258a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(51.196 -11.246) rotate(90)" fill="#e4a853"></path>
                                </svg>
                            </div>
                            <div class="faq-svg-2 svg-minus d-none">    
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M17.6,22.492.925,5.476a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L5.4,44.062a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(0 25.2) rotate(-90)" fill="#e4a853"></path>
                                </svg>
                            </div>    
                        </div>
                    </div>
                    <div id="panelsStayOpen-92" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-92" style="">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>             
        <div class="accordian-3">
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    <div class="accordian-button-3">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-93" aria-expanded="false" aria-controls="panelsStayOpen-93" tabindex="-1">
                            At vero eos et accusamus et iusto odio dignissimos ?
                        </button>                         
                        <div class="i-accordian-3-icons">
                            <div class="faq-svg svg-plus d-block">
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                    <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M28.85,28.688,12.172,11.673a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L16.646,50.258a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(51.196 -11.246) rotate(90)" fill="#e4a853"></path>
                                </svg>
                            </div>
                            <div class="faq-svg-2 svg-minus d-none">    
                                <svg class="svg-plu " xmlns="http://www.w3.org/2000/svg" width="45" height="25.2" viewBox="0 0 45 25.2">
                                <path id="Icon_ionic-ios-arrow-forward" data-name="Icon ionic-ios-arrow-forward" d="M17.6,22.492.925,5.476a3.25,3.25,0,0,1,0-4.542,3.13,3.13,0,0,1,4.462,0l18.9,19.279a3.259,3.259,0,0,1,.092,4.435L5.4,44.062a3.122,3.122,0,0,1-4.462,0,3.25,3.25,0,0,1,0-4.542Z" transform="translate(0 25.2) rotate(-90)" fill="#e4a853"></path>
                                </svg>
                            </div>    
                        </div>
                    </div>
                    <div id="panelsStayOpen-93" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-93" style="">
                        <div class="accordion-body">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</section>
                    Copy to clipboard