Accordion | Education Plus

Accordion Style 1

01. Sed ut perspiciatis unde omnis natus error sit voluptatem dolore?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.

02. At vero eos et accusamus et iusto odio dignissimos ducimus qui?

03. Temporibus autem quibusdam et aut officiis debitis aut dolore ducimus?

                    
<section class="accordion-style elements">
    <div class="container">
        <div class="accordion-block">
            <div id="accordion2" class="accordion2">
                <h2>Accordion Style 1</h2>
                <div class="content">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion2-1" role="button" aria-expanded="false" aria-controls="accordion2-1">
                            <div class="svg-wrapper">
                                <i>
                                    <svg class="svg-plus  " xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 112" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(0 150) rotate(-90)" fill="#1a1725"/>
                                    </svg>
                                    <svg class="svg-minus  d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 111" d="M0,75a75,75,0,1,1,75,75A75.068,75.068,0,0,1,0,75Zm10.737,0A64.263,64.263,0,1,0,75,10.737,64.32,64.32,0,0,0,10.737,75Zm39.632,0L86.053,39.316l7.579,7.579L65.685,75l27.947,28.105-7.579,7.579Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
                                    </svg>
                                </i>
                            </div>
                            <h3>01. Sed ut perspiciatis unde omnis natus error sit voluptatem dolore?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-1">
                        <div class="card card-body">
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.</p>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-2" role="button" aria-expanded="false" aria-controls="accordion2-2">
                            <div class="svg-wrapper">  
                                <i>
                                    <svg class="svg-plus  " xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 112" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(0 150) rotate(-90)" fill="#1a1725"/>
                                    </svg>
                                    <svg class="svg-minus  d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 111" d="M0,75a75,75,0,1,1,75,75A75.068,75.068,0,0,1,0,75Zm10.737,0A64.263,64.263,0,1,0,75,10.737,64.32,64.32,0,0,0,10.737,75Zm39.632,0L86.053,39.316l7.579,7.579L65.685,75l27.947,28.105-7.579,7.579Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
                                    </svg>
                                </i>
                            </div>
                            <h3>02. At vero eos et accusamus et iusto odio dignissimos ducimus qui?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-2">
                        <div class="card card-body">
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.</p>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion2-3" role="button" aria-expanded="false" aria-controls="accordion2-2">
                            <div class="svg-wrapper">  
                                <i>
                                    <svg class="svg-plus  " xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 112" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(0 150) rotate(-90)" fill="#1a1725"/>
                                    </svg>
                                    <svg class="svg-minus  d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 111" d="M0,75a75,75,0,1,1,75,75A75.068,75.068,0,0,1,0,75Zm10.737,0A64.263,64.263,0,1,0,75,10.737,64.32,64.32,0,0,0,10.737,75Zm39.632,0L86.053,39.316l7.579,7.579L65.685,75l27.947,28.105-7.579,7.579Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
                                    </svg>
                                </i>
                            </div>
                            <h3>03. Temporibus autem quibusdam et aut officiis debitis aut dolore ducimus?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion2-3">
                        <div class="card card-body">
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit.</p>
                        </div>
                    </div>
                </div>
            </div>
  </div>
</section>

Accordion Style 2

Sed ut perspiciatis unde omnis natus error sit voluptatem dolore?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio.

At vero eos et accusamus et iusto odio dignissimos ducimus qui?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio.

                    
<section class="accordion-style elements">
    <div class="container">
            <div id="accordion3" class="accordion3">
                <h2>Accordion Style 2</h2>
                <div class="content">
                    <div class="main-content">
                        <a class="icon" data-bs-toggle="collapse" href="#accordion3-1" role="button" aria-expanded="false" aria-controls="accordion3-1">
                            <div class="svg-wrapper">
                                <i>
                                    <svg class="svg-plus  " xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 112" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(0 150) rotate(-90)" fill="#1a1725"/>
                                    </svg>
                                    <svg class="svg-minus  d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 111" d="M0,75a75,75,0,1,1,75,75A75.068,75.068,0,0,1,0,75Zm10.737,0A64.263,64.263,0,1,0,75,10.737,64.32,64.32,0,0,0,10.737,75Zm39.632,0L86.053,39.316l7.579,7.579L65.685,75l27.947,28.105-7.579,7.579Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
                                    </svg>
                                </i>
                            </div>
                            <h3>Sed ut perspiciatis unde omnis natus error sit voluptatem dolore?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion3-1">
                        <div class="card card-body">
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio.</p>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="main-content">
                        <a class="icon collapsed" data-bs-toggle="collapse" href="#accordion3-2" role="button" aria-expanded="false" aria-controls="accordion3-2">
                            <div class="svg-wrapper">  
                                <i>
                                    <svg class=" svg-plus " xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 112" d="M0,75A75,75,0,1,0,75,0,75.068,75.068,0,0,0,0,75Zm10.737,0A64.263,64.263,0,1,1,75,139.263,64.32,64.32,0,0,1,10.737,75Zm39.632,0,35.684,35.684,7.579-7.579L65.685,75,93.631,46.895l-7.579-7.579Z" transform="translate(0 150) rotate(-90)" fill="#1a1725"/>
                                    </svg>
                                    <svg class="svg-minus  d-none" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                                        <path data-name="Union 111" d="M0,75a75,75,0,1,1,75,75A75.068,75.068,0,0,1,0,75Zm10.737,0A64.263,64.263,0,1,0,75,10.737,64.32,64.32,0,0,0,10.737,75Zm39.632,0L86.053,39.316l7.579,7.579L65.685,75l27.947,28.105-7.579,7.579Z" transform="translate(150) rotate(90)" fill="#1a1725"/>
                                    </svg>
                                </i>
                            </div>
                            <h3>At vero eos et accusamus et iusto odio dignissimos ducimus qui?</h3>
                        </a>
                    </div>
                    <div class="sub-content collapse" id="accordion3-2">
                        <div class="card card-body">
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias exceptursint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum dolorum fuga. Et harum quidem rerum facilis est etismo expedita distinctio.</p>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</section>