9820888458 business@123

Title

Footer form

JAP

Accordion

Submitted by admin on

Node Title

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 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
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.
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.
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. 
                            
<section class="accordion">
    <div class="container">
        <div class="accordion-block">
            <h2>Accordion Title</h2>
            <div id="accordion1" data-aos="fade-up">
                <div class="content1">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion1-1" role="button" aria-expanded="false" aria-controls="accordion1-1">
                            <h4>1. When can we get started?</h4>
                            <i>
                                <svg class="svg-minus" xmlns="http://www.w3.org/2000/svg" width="150" height="25" viewBox="0 0 150 25">
                                    <path d="M290,257.5A12.5,12.5,0,0,1,277.5,270h-125a12.5,12.5,0,0,1,0-25h125A12.5,12.5,0,0,1,290,257.5Z" transform="translate(-140 -245)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                    <path data-name="Path 39008" d="M296.2,151.2a9.784,9.784,0,0,0-9.783,9.783v55.434H230.982a9.783,9.783,0,1,0,0,19.566h55.434v55.434a9.783,9.783,0,0,0,19.566,0V235.983h55.434a9.783,9.783,0,1,0,0-19.566H305.982V160.983A9.783,9.783,0,0,0,296.2,151.2Z" transform="translate(-221.199 -151.2)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion1-1" data-bs-parent="#accordion1">
                        <div class="card card-body">
                        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.
                        </div>
                    </div>
                </div>
                <div class="content1">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion1-2" role="button" aria-expanded="false" aria-controls="accordion1-2">
                            <h4>2. Sed ut perspiciatis unde omnis iste natus error?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="25" viewBox="0 0 150 25">
                                    <path d="M290,257.5A12.5,12.5,0,0,1,277.5,270h-125a12.5,12.5,0,0,1,0-25h125A12.5,12.5,0,0,1,290,257.5Z" transform="translate(-140 -245)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                    <path data-name="Path 39008" d="M296.2,151.2a9.784,9.784,0,0,0-9.783,9.783v55.434H230.982a9.783,9.783,0,1,0,0,19.566h55.434v55.434a9.783,9.783,0,0,0,19.566,0V235.983h55.434a9.783,9.783,0,1,0,0-19.566H305.982V160.983A9.783,9.783,0,0,0,296.2,151.2Z" transform="translate(-221.199 -151.2)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-2" data-bs-parent="#accordion1">
                        <div class="card card-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="content1">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion1-3" role="button" aria-expanded="false" aria-controls="accordion1-3">
                            <h4>3. Excepteur sint occaecat cupidatat non proident?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="25" viewBox="0 0 150 25">
                                    <path d="M290,257.5A12.5,12.5,0,0,1,277.5,270h-125a12.5,12.5,0,0,1,0-25h125A12.5,12.5,0,0,1,290,257.5Z" transform="translate(-140 -245)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                    <path data-name="Path 39008" d="M296.2,151.2a9.784,9.784,0,0,0-9.783,9.783v55.434H230.982a9.783,9.783,0,1,0,0,19.566h55.434v55.434a9.783,9.783,0,0,0,19.566,0V235.983h55.434a9.783,9.783,0,1,0,0-19.566H305.982V160.983A9.783,9.783,0,0,0,296.2,151.2Z" transform="translate(-221.199 -151.2)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-3" data-bs-parent="#accordion1">
                        <div class="card card-body">
                            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.
                        </div>
                    </div>
                </div>
                <div class="content1">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion1-4" role="button" aria-expanded="false" aria-controls="accordion1-4">
                            <h4>4. At vero eos et accusamus et iusto odio dignissimos?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="25" viewBox="0 0 150 25">
                                    <path d="M290,257.5A12.5,12.5,0,0,1,277.5,270h-125a12.5,12.5,0,0,1,0-25h125A12.5,12.5,0,0,1,290,257.5Z" transform="translate(-140 -245)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                    <path data-name="Path 39008" d="M296.2,151.2a9.784,9.784,0,0,0-9.783,9.783v55.434H230.982a9.783,9.783,0,1,0,0,19.566h55.434v55.434a9.783,9.783,0,0,0,19.566,0V235.983h55.434a9.783,9.783,0,1,0,0-19.566H305.982V160.983A9.783,9.783,0,0,0,296.2,151.2Z" transform="translate(-221.199 -151.2)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion1-4" data-bs-parent="#accordion1">
                        <div class="card card-body">
                            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.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Accordion Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris . 
                            
<section class="accordion">
    <div class="container">
        <div class="accordion-block">
            <h2>Accordion Title</h2>
            <div id="accordion2" data-aos="fade-up">
                <div class="content2">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-1" role="button" aria-expanded="false" aria-controls="accordion2-1">
                            <h4>1. When can we get started?</h4>
                            <i>
                                <svg class="svg-minus" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39280" d="M.527,73.734,72.008.528A1.735,1.735,0,0,1,73.921.136,1.777,1.777,0,0,1,75,1.774V21.937a1.688,1.688,0,0,1-.521,1.247L23.866,75.019l50.609,51.8A1.834,1.834,0,0,1,75,128.063v20.163a1.775,1.775,0,0,1-1.079,1.639,1.679,1.679,0,0,1-1.877-.392L.522,76.227A1.81,1.81,0,0,1,0,74.98a1.749,1.749,0,0,1,.522-1.247Z" transform="translate(150) rotate(90)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39277" d="M.527,76.266l71.48,73.207a1.735,1.735,0,0,0,1.913.392A1.777,1.777,0,0,0,75,148.226V128.063a1.688,1.688,0,0,0-.521-1.247L23.866,74.981l50.609-51.8A1.834,1.834,0,0,0,75,21.937V1.775A1.775,1.775,0,0,0,73.917.136,1.679,1.679,0,0,0,72.04.528L.522,73.773A1.81,1.81,0,0,0,0,75.02a1.749,1.749,0,0,0,.522,1.247Z" transform="translate(0 75) rotate(-90)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion2-1" data-bs-parent="#accordion2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
                        </div>
                    </div>
                </div>
                <div class="content2">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-2" role="button" aria-expanded="false" aria-controls="accordion2-2">
                            <h4>2. Sed ut perspiciatis unde omnis iste natus error?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39280" d="M.527,73.734,72.008.528A1.735,1.735,0,0,1,73.921.136,1.777,1.777,0,0,1,75,1.774V21.937a1.688,1.688,0,0,1-.521,1.247L23.866,75.019l50.609,51.8A1.834,1.834,0,0,1,75,128.063v20.163a1.775,1.775,0,0,1-1.079,1.639,1.679,1.679,0,0,1-1.877-.392L.522,76.227A1.81,1.81,0,0,1,0,74.98a1.749,1.749,0,0,1,.522-1.247Z" transform="translate(150) rotate(90)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39277" d="M.527,76.266l71.48,73.207a1.735,1.735,0,0,0,1.913.392A1.777,1.777,0,0,0,75,148.226V128.063a1.688,1.688,0,0,0-.521-1.247L23.866,74.981l50.609-51.8A1.834,1.834,0,0,0,75,21.937V1.775A1.775,1.775,0,0,0,73.917.136,1.679,1.679,0,0,0,72.04.528L.522,73.773A1.81,1.81,0,0,0,0,75.02a1.749,1.749,0,0,0,.522,1.247Z" transform="translate(0 75) rotate(-90)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-2" data-bs-parent="#accordion2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
                        </div>
                    </div>
                </div>
                <div class="content2">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-3" role="button" aria-expanded="false" aria-controls="accordion2-3">
                            <h4>3. Excepteur sint occaecat cupidatat non proident?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39280" d="M.527,73.734,72.008.528A1.735,1.735,0,0,1,73.921.136,1.777,1.777,0,0,1,75,1.774V21.937a1.688,1.688,0,0,1-.521,1.247L23.866,75.019l50.609,51.8A1.834,1.834,0,0,1,75,128.063v20.163a1.775,1.775,0,0,1-1.079,1.639,1.679,1.679,0,0,1-1.877-.392L.522,76.227A1.81,1.81,0,0,1,0,74.98a1.749,1.749,0,0,1,.522-1.247Z" transform="translate(150) rotate(90)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39277" d="M.527,76.266l71.48,73.207a1.735,1.735,0,0,0,1.913.392A1.777,1.777,0,0,0,75,148.226V128.063a1.688,1.688,0,0,0-.521-1.247L23.866,74.981l50.609-51.8A1.834,1.834,0,0,0,75,21.937V1.775A1.775,1.775,0,0,0,73.917.136,1.679,1.679,0,0,0,72.04.528L.522,73.773A1.81,1.81,0,0,0,0,75.02a1.749,1.749,0,0,0,.522,1.247Z" transform="translate(0 75) rotate(-90)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-3" data-bs-parent="#accordion2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
                        </div>
                    </div>
                </div>
                <div class="content2">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-4" role="button" aria-expanded="false" aria-controls="accordion2-4">
                            <h4>4. At vero eos et accusamus et iusto odio dignissimos?</h4>
                            <i>
                                <svg class="svg-minus d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39280" d="M.527,73.734,72.008.528A1.735,1.735,0,0,1,73.921.136,1.777,1.777,0,0,1,75,1.774V21.937a1.688,1.688,0,0,1-.521,1.247L23.866,75.019l50.609,51.8A1.834,1.834,0,0,1,75,128.063v20.163a1.775,1.775,0,0,1-1.079,1.639,1.679,1.679,0,0,1-1.877-.392L.522,76.227A1.81,1.81,0,0,1,0,74.98a1.749,1.749,0,0,1,.522-1.247Z" transform="translate(150) rotate(90)" fill="#111"/>
                                </svg>
                                <svg class="svg-plus" xmlns="http://www.w3.org/2000/svg" width="150" height="75" viewBox="0 0 150 75">
                                    <path data-name="Path 39277" d="M.527,76.266l71.48,73.207a1.735,1.735,0,0,0,1.913.392A1.777,1.777,0,0,0,75,148.226V128.063a1.688,1.688,0,0,0-.521-1.247L23.866,74.981l50.609-51.8A1.834,1.834,0,0,0,75,21.937V1.775A1.775,1.775,0,0,0,73.917.136,1.679,1.679,0,0,0,72.04.528L.522,73.773A1.81,1.81,0,0,0,0,75.02a1.749,1.749,0,0,0,.522,1.247Z" transform="translate(0 75) rotate(-90)" fill="#111"/>
                                </svg>
                            </i>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-4" data-bs-parent="#accordion2">
                        <div class="card card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et and dolore magna aliqua. Utium enim ad minim veniam, quis nostrud exercitation ullamco laboris .
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Accordion Style 3

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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum. 
                            
<section class="accordion">
    <div class="container">
        <div class="accordion-block">
            <h2>Accordion Title</h2>
            <div id="accordion3" data-aos="fade-up">
                <div class="content3">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion3-1" role="button" aria-expanded="false" aria-controls="accordion3-1">
                            <h3><span>1</span> When can we get started?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse show" id="accordion3-1">
                        <div class="card card-body">
                            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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
                </div>
                <div class="content3">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion3-2" role="button" aria-expanded="false" aria-controls="accordion3-2">
                            <h3><span>2</span> Sed ut perspiciatis unde omnis iste natus error?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion3-2">
                        <div class="card card-body">
                            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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
                </div>
                <div class="content3">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion3-3" role="button" aria-expanded="false" aria-controls="accordion3-3">
                            <h3><span>3</span> Excepteur sint occaecat cupidatat non proident?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion3-3">
                        <div class="card card-body">
                            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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
                </div>
                <div class="content3">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion3-4" role="button" aria-expanded="false" aria-controls="accordion3-4">
                            <h3><span>4</span> At vero eos et accusamus et iusto odio dignissimos?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion3-4">
                        <div class="card card-body">
                            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 exercit ation 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, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>