Accordion

                       
<div class="accordion-style-1" id="accordionOne">
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-1-1" role="button" aria-expanded="false" aria-controls="item-1-1" title="Title">
            Lorem ipsum dolor sit amet, consectetur adipiscing sed do incididunt ut labore?
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
        </a>
        <div class="collapse" id="item-1-1" data-bs-parent="#accordionOne">
            <div class="item-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venam quis nostrud exercitati on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-1-2" role="button" aria-expanded="false" aria-controls="item-1-2" title="Title">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore?
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
        </a>
        <div class="collapse" id="item-1-2" data-bs-parent="#accordionOne">
            <div class="item-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venam quis nostrud exercitati on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-1-3" role="button" aria-expanded="false" aria-controls="item-1-3" title="Title">
            Ut enim ad minima veniam, quis nostrum sit voluptatem accusantium dolore?
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
        </a>
        <div class="collapse" id="item-1-3" data-bs-parent="#accordionOne">
            <div class="item-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venam quis nostrud exercitati on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-1-4" role="button" aria-expanded="false" aria-controls="item-1-4" title="Title">
            Nemo enim ipsam voluptatem quia error sit voluptatem accusantium dolore?
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
        </a>
        <div class="collapse" id="item-1-4" data-bs-parent="#accordionOne">
            <div class="item-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venam quis nostrud exercitati on ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
            </div>
        </div>
    </div>
</div>
                       
                       Copy to clipboard
                   

                       
<div class="accordion-style-2">
    <div class="item">
        <h3 class="accordion-header">
            <button type="button" class="border-style" data-bs-toggle="collapse" data-bs-target="#One" aria-controls="One" aria-expanded="true">
                1. Lorem ipsum dolor sit amet, consectetur adipiscing sed do incididunt ut labore?
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                        <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                    </svg>
                    <span class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                            <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                        </svg>
                    </span>
                </span>
            </button>
        </h3>
        <div id="One" class="accordion-collapse collapse show" 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 minim veniam, quis nost rud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>
        </div>
    </div>
    <div class="item">
        <h3 class="accordion-header">
            <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Two" aria-controls="Two">
                2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore?
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                        <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                    </svg>
                    <span class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                            <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                        </svg>
                    </span>
                </span>
            </button>
        </h3>
        <div id="Two" class="accordion-collapse collapse" 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 minim veniam, quis nost rud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>
        </div>
    </div>
    <div class="item">
        <h3 class="accordion-header">
            <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Three" aria-controls="Three">
                3. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit?
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                        <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                    </svg>
                    <span class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                            <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                        </svg>
                    </span>
                </span>
            </button>
        </h3>
        <div id="Three" class="accordion-collapse collapse" 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 minim veniam, quis nost rud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>
        </div>
    </div>
    <div class="item">
        <h3 class="accordion-header">
            <button type="button" class="" data-bs-toggle="collapse" data-bs-target="#Four" aria-controls="Four">
                4. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil labore?
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                        <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                    </svg>
                    <span class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                            <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                        </svg>
                    </span>
                </span>
            </button>
        </h3>
        <div id="Four" class="accordion-collapse collapse" 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 minim veniam, quis nost rud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
            </p>
        </div>
    </div>
</div>
                       
                       Copy to clipboard
                   

                       
<div class="accordion-style-3" id="accordionThree">
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-3-1" role="button" aria-expanded="true" aria-controls="item-3-1" title="Title">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
            Lorem ipsum dolor sit amet, consectetur adipiscing sed do incididunt ut labore?
        </a>
        <div class="collapse show" id="item-3-1" data-bs-parent="#accordionThree">
            <div class="item-content">
                <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 pariat Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-3-2" role="button" aria-expanded="false" aria-controls="item-3-2" title="Title">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore?
        </a>
        <div class="collapse" id="item-3-2" data-bs-parent="#accordionThree">
            <div class="item-content">
                <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 pariat Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-3-3" role="button" aria-expanded="false" aria-controls="item-3-3" title="Title">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit?
        </a>
        <div class="collapse" id="item-3-3" data-bs-parent="#accordionThree">
            <div class="item-content">
                <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 pariat Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-3-4" role="button" aria-expanded="false" aria-controls="item-3-4" title="Title">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil labore?
        </a>
        <div class="collapse" id="item-3-4" data-bs-parent="#accordionThree">
            <div class="item-content">
                <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 pariat Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a class="collapsed" data-bs-toggle="collapse" href="#item-3-5" role="button" aria-expanded="false" aria-controls="item-3-5" title="Title">
            <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                    <path data-name="Path 39644" d="M187.726,67.2v50.526H137.2v18.947h50.526V187.2h18.947V136.677H257.2V117.729H206.673V67.2Z" transform="translate(-137.2 -67.203)" fill="#121619"/>
                </svg>
                <span class="overlay-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20">
                        <rect  data-name="Rectangle 18348" width="120" height="20" fill="#121619"/>
                    </svg>
                </span>
            </span>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesent
        </a>
        <div class="collapse" id="item-3-5" data-bs-parent="#accordionThree">
            <div class="item-content">
                <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 pariat Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>
                       
                       Copy to clipboard