Salut Nico,
Je souhaites utiliser ton plugin sur mon futur blog. A coté du titre, je souhaite mettre le boutton expandmore__button pour afficher le chapo de l'article. Le soucis, c'est que le bouton n'est pas dans le même conteneur que le texte caché. En revanche, il est dans le même parent.

C'est possible de faire ça ou faut obbligatoirement que mon bouton soit dans le même conteneur ?

J'ai essayé de bricoler avec une position absolute mais c'est pas bô. ^^

When someone click a link with anchor and take them to another page, is it possible to expand that section open?

No more to say.

See the « publishing npm package » documentation.

If you want to set your own classname for $to_expand, you have to set it twice at the moment:

In line 16 you define your var like this: $to_expand = $('.js-to_expand').
In line 28 you don’t use this var but instead you use the classname again: $to_expand = $this.next(".js-to_expand").

As expected it would be nice to define your own classname only once inside the vars at the top.

Hi,

I was trying to add this package to rails-assets.org for use with the Rails asset pipeline, but it complains with the following error message:

jquery-accessible-hide-show-aria has no versions defined. Please create an issue in component's repository.

It seems that rails-assets.org will look for the current version Tag in the Git repo. Could you please add the tag for v1.4.0? The easiest way to do this would be to create a new Release on Github:

• go to the Releases tab
• enter v1.4.0 for Tag Version
• enter Recent commits / 9b7ad41 as Target
• you can add a title and description but it's optional
• click Publish Release

To check if it works now you can try to add the package to rails-assets.org via https://rails-assets.org/components/new.

Thanks a lot!

I try to use this for additional Information on the same page (with anchors) like:

<a class="xyz" href="#box-download">Downloads</a>

and then the box itselve:

<div id="box-download-wrapper" class="">
      <h5 class="js-expandmore">Downloads</h5>
      <div class="js-to_expand">
        <div id="box-download" class="expand-inner">
          <ul>
            <li><a href="" class="">Download</a></li>
            ...
          </ul>
      </div>
    </div>
    </div>

When i open this in a new window with http://domain.org/page.html#box-download everything is fine. Sadly it doesn't work when i just click on the link when i am on the same page.
It would be usefull, when there is an onclick handler for something like that.
regards

Hello

I want rework this code and I need to know why uses variables for this attributes names. Can you help ?

https://github.com/nico3333fr/jquery-accessible-hide-show-aria/blob/master/jquery-accessible-hide-show-aria.js#L10-L13

these are recommended settings by a11y experts. You may update to fulfill your needs, but be sure of what you’re doing.

Hallo,

Thank you for this very useful plugin.

I would like to ask about cross-browser compatibility.

Are there any clues about compatibility with mobile browsers for example?

This is probably a long shot but is it possible to animate the "minus/down" and "plus/up" icon when clicking to expand/contract? It also helped them knowing that it's being animated instead of non-animated/fast version. I was hoping it can be used with FontAwesome icons.

Now we have a button to toggle/display all at once, thank you nico. But sometimes, we just want to toggle/display a group of elements, not all of them. Sorry my english is too bad, I switch in french right away :)

On devrait pouvoir "tout" ouvrir/fermer en fonction d'une section/div et pas tous les éléments repliables de toute la page. Typiquement, on imagine une page à deux colonnes : une FAQ en partie centrale et des boîtes de filtres repliables dans une colonne latérale. Je devrais pouvoir ouvrir toute la FAQ sans ouvrir les filtres et vice-versa.

If there is a span in h2.expandmore, Chrome doesn't detect the click correctly.

Reported by @Kozlika

Salut Nico, une remarque et une question. La remarque : pour moi le bouton devrait être créé par le js, sans js activé il n'a pas de raison d'être. La question : quelle est la nécessité du couple labelled-by/id ?

A quick question: what's the benefit of generating and adding it to element in jquery vs using directly in HTML? Is it because for accessibility?

To ensure that:

• attributes are added, classes are there, and the correct elements are being added too.
• JS interactions are fired correctly

With Karma, for example.

And then automate these tests using Travis, enabling you to see if other developers' contributions pass the tests, as in this screenshot:

Hello,

In order to allow assistive technologies to focus on content, there should be an aria-controls attribute on buttons with the "id" of the content to expand as value.

More details: https://www.w3.org/TR/wai-aria-practices/#accordion

Related to #9 I think we can find a better way to handle this case, depending on the browser compatibility you want.

You may hide content from the beginning, as a default state, then trigger an animation on .no-js class:

@keyframes no-js {
  to {
    transform: none;
    transition-delay: 50ms, 0ms;
    visibility: visible;
  }
}

js-to_expand {
visibility: hidden;
}

.no-js .js-to_expand {
  animation: 300ms ease-in 300ms forwards no-js;
}

I made a small pen to play with it.

I know you're not delivering CSS along with your script but that may be another way of styling to mention :)

I'd love to have your opinion on this!

Thank you for this very useful plugin!

Is there an option to toggle to open all at once? Same thing for close? That would be very helpful. Thanks!

I noticed the "Expand all" button doesn't work on keyboard properly.

If you hit Enter, it doesn't do anything.

If you hit Spacebar, it sort of worked but not working as expected.

The mouse click state is fine though.

You can test the "expand all" button on your page: https://a11y.nicolas-hoffmann.net/hide-show/

This avoid problems in Sharepoint and in forms.

Classes used as DOM hooks for the JS (and not for styling) should be differentiated. Usually it's done by prefixing these classes with js-, but you could also use data-js-xxx or data-xxx-js attributes which would have the same effect.

In your documentation page, there is a double same selector (or did I misread?) :

/* optional */
.expandmore__button:before,
.expandmore__button:before {
  content : '+ ';
}

Anyway, thanks A LOT for this plugin <3

Suggested by @goetsu at Paris Web.