Action sur un élément qui n'est pas dans le même conteneur (mais dans le même parent) about jquery-accessible-hide-show-aria HOT 7 CLOSED

Hello,

en l'état actuel des choses, la seule contrainte est que les éléments js-expandmore et js-to_expand soient adjacents, vu que j'utilise $this.next. Si c'est le cas, ça fonctionnera.

Sinon il faudrait que je trouve un système qui permette de trouver "le prochain". Note que cela doit pouvoir se faire, il suffirait de changer la méthode

$to_expand = $this.next(".js-to_expand"),

en qqch comme

$to_expand = $this.parent().find(".js-to_expand"),

et cela devrait marcher.

à+
Nico

from jquery-accessible-hide-show-aria.

Salut Nico,
Merci pour ta réponse. J'ai testé $this.parent mais ça ne fonctionne pas.
Du coup, j'ai adapté ma mise en page pour garder mon boutton dans le même conteneur puis j'ai joué avec une position absolute qui fonctionne bien grâce à ma réorganisation graphique.
Le seul point qui me gène un peu, c'est que le boutton ne sera pas au bon endroit pour les lecteurs d'écran mais je vais pas faire la fine bouche.
L'essentiel est que ça tienne la route et que tout le monde aient accès à la fonctionnalité ce que je souhaite --> cacher le chapo de l'article.

Autre chose aussi, ce serait cool de pouvoir jouer avec les animations css si possible.
Pour l'instant, j'arrive à jouer une animation au déclenchement invisible --> visible grâce à :not([aria-hidden="true"]) mais ça coince pour jouer dans l'autre sens.
Je ne pense pas que ce soit possible en pur css d'ailleurs étant donné le contexte.

Peut être ajouté les class .is-opened & .is-closed sur .js-to_expand rendrait les choses plus simple. Je n'ai pas (encore) les compétences pour intervenir sur ton code.

En tout cas merci pour tes plugins !
a+

from jquery-accessible-hide-show-aria.

Salut,

donne-moi un exemple de structure pour ton code, et je te dirais ce qui fonctionne (le $this.parent ne peut pas marcher)

Pour les animations, faudrait que je fasse qq essais, ça doit bien être possible en animant max-height ou qqch dans le genre ^^

à+

from jquery-accessible-hide-show-aria.

Salut Nico,

li.article
____.container
________figure.article_thumb
________.article-description
________.article_related
____________.article_preview-action.js-expandmore
____________.article_link
____________.article_totalcomments
____.article-preview.js-to_expend

Pour l'animation css, j'ai fait :
@Keyframes expand {
0% {
opacity: 0;
transform: scale(0);
transform-origin: right top;
}
100% {
opacity: 1;
transform: scale(1);
transform-origin: right top;
}
}

.article_preview:not([aria-hidden="true"]) {
animation: expand 300ms;
}

C'est pour le retour à [aria-hidden="true"] que ça se complique mais d'un point vue UX, ça ne me choque pas. :)

from jquery-accessible-hide-show-aria.

Du coup, ça donnerait :

$to_expand = $this.parents(".article").find(".js-to_expand"),

Je regarde pour les animations dès que j'ai un peu de temps. ;)

from jquery-accessible-hide-show-aria.

Salut Nico,
Merci pour l'info.
J'ai fait l'fou fou avec ton plugin. Mon blog ressemble à une armoire Ikéa. Il y a des tirroirs partout. :d
Si tu veux, je te montre quand c'est prêt. ;)

from jquery-accessible-hide-show-aria.

Salut,

pas de souci, je suis curieux de voir ça :)

à+
Nico

from jquery-accessible-hide-show-aria.