Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add accordion component #61

Merged
merged 4 commits into from
Oct 1, 2021

Conversation

alexander-schranz
Copy link
Member

@alexander-schranz alexander-schranz commented Oct 1, 2021

Accordion is build on top of the aria attributes by the w3c example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

<div id="accordion">
    <section class="collapse">
        <h4>
            <button id="accordion-button-1" aria-expanded="false" aria-controls="accordion-body-1">
                Header 1
            </button>
        </h4>

        <div id="accordion-body-1" aria-hidden="true" aria-labelledby="accordion-button-1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </section>

    <section class="collapse">
        <h4>
            <button id="accordion-button-2" aria-expanded="false" aria-controls="accordion-body-2">
                Header 2
            </button>
        </h4>

        <div id="accordion-body-2" aria-hidden="true" aria-labelledby="accordion-button-2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </section>
</div>
import Accordion from '@sulu/web/packages/components/accordion/accordion';
var component = new Accordion();
component.initialize(document.getElementById('accordion'), {});

https://jsfiddle.net/26gj8mdh/1/

@luca-rath did on top of your implementation created the accordion here. Adjusted to remove the data classes and build it on top of the aria attributes, so less need to be written by the developer which use the component. Also jquery is removed as I not longer want to build components here on top of jquery, so websites build are smaller. So we maybe could remove in the project jquery or lazy load it where required.

Co-authored-by: Luca Rath-Heel <luca@sulu.io>
packages/components/accordion/accordion.js Outdated Show resolved Hide resolved
packages/components/accordion/accordion.js Outdated Show resolved Hide resolved
packages/components/accordion/accordion.js Outdated Show resolved Hide resolved
packages/components/accordion/accordion.js Show resolved Hide resolved
packages/components/accordion/accordion.js Show resolved Hide resolved
packages/components/accordion/accordion.js Show resolved Hide resolved
packages/components/accordion/accordion.js Outdated Show resolved Hide resolved
packages/components/accordion/accordion.js Outdated Show resolved Hide resolved
packages/components/accordion/accordion.js Show resolved Hide resolved
alexander-schranz and others added 2 commits October 1, 2021 10:21
Co-authored-by: Luca Rath-Heel <luca-rath@hotmail.com>
Co-authored-by: Luca Rath-Heel <luca-rath@hotmail.com>
Copy link
Contributor

@luca-rath luca-rath left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good, will try it in a project next week

@luca-rath
Copy link
Contributor

Code looks good, will try it in a project next week

Just tested using the jsfiddle, looks good, therefore I'm going to merge it now

@luca-rath luca-rath merged commit 8daa51f into sulu:master Oct 1, 2021
@alexander-schranz alexander-schranz deleted the feature/accordion branch October 1, 2021 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants