Accordion

Accordion Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.

                        
    <div class="accordion accordion-style-1" id="accordionExample">
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="border-style" data-bs-toggle="collapse" data-bs-target="#One" aria-controls="One" aria-expanded="true">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                    The most important things are not things, so we’ll design experiences?
                </button>
            </h3>
            <div id="One" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
            <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Two" aria-controls="Two">
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                        <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                    </svg>
                    <div class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                            <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                        </svg>
                    </div>
                </div>
                How do I get to and from Wire Summit?
            </button>
            </h3>
            <div id="Two" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Three" aria-controls="Three">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                    At vero eos et accusamus et iusto odio dignissimos ducimus?
                </button>
            </h3>
            <div id="Three" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Four" aria-controls="Four">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                    Nam libero tempore, cum soluta nobis est eligendi?
                </button>
            </h3>
            <div id="Four" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Five" aria-controls="Five">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                    Et harum quidem rerum facilis est et expedita distinction?
                </button>
            </h3>
            <div id="Five" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Six" aria-controls="Six">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                    Neque porro quisquam est, qui dolorem ipsum quia dolor?
                </button>
            </h3>
            <div id="Six" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <hr>
    </div>

Accordion Style 2

                        
    <div class="accordion accordion-style-2" id="accordionExample">
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="border-style" data-bs-toggle="collapse" data-bs-target="#TwoOne" aria-controls="TwoOne" aria-expanded="true">
                    The most important things are not things, so we’ll design experiences?
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                </button>
            </h3>
            <div id="TwoOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
            <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#TwoTwo" aria-controls="TwoTwo">
                How do I get to and from Wire Summit?
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                        <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                    </svg>
                    <div class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                            <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                        </svg>
                    </div>
                </div>
            </button>
            </h3>
            <div id="TwoTwo" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#TwoThree" aria-controls="TwoThree">
                    At vero eos et accusamus et iusto odio dignissimos ducimus?
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                </button>
            </h3>
            <div id="TwoThree" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
        <div class="item">
            <h3 class="accordion-header" id="headingOne">
                <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#TwoFour" aria-controls="TwoFour">
                    Nam libero tempore, cum soluta nobis est eligendi?
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="119.999" height="120" viewBox="0 0 119.999 120">
                            <path id="noun-plus-4488200" d="M176.669,46.665a59.994,59.994,0,1,0,30,8.037,60,60,0,0,0-30-8.037Zm24,66h-18v18a6,6,0,1,1-12,0v-18h-18a6,6,0,1,1,0-12h18v-18a6,6,0,1,1,12,0v18h18a6,6,0,1,1,0,12Z" transform="translate(-116.67 -46.664)" fill="#1a1725"/>
                        </svg>
                        <div class="overlay-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="120.003" height="120" viewBox="0 0 120.003 120">
                                <path id="Path_38952" data-name="Path 38952" d="M200.661,45.867a60,60,0,1,0-.533,84.8,59.705,59.705,0,0,0,.533-84.8ZM189.861,92H126.128a4,4,0,1,1,0-8h63.733a4.012,4.012,0,0,1,4,4A3.929,3.929,0,0,1,189.861,92Z" transform="translate(-97.992 -28.001)" fill="#1a1725"/>
                            </svg>
                        </div>
                    </div>
                </button>
            </h3>
            <div id="TwoFour" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat cupidatat.
                </p>
            </div>
        </div>
    </div>

About Us

Contact

Accordion Style 1

Accordion Style 2