Show | Hide en full CSS

Bonjour à toutes et tous,

Actuellement, je suis en train de réaliser quelque chose de similaire au collapse du twitter bootstrap.
Pour info: http://getbootstrap.com/javascript/#collapse

En bref: je clique sur un bouton, et cela affiche/cache un div.
Mon souci: il faut également que ce système fonctionne sans JavaScript.

Quelqu'un a une idée?

Grand merci, et bonne fin de journée à vous!

Oué, pas compliqué, tu peux simuler cela avec des checkbox cachés, exemple
Modifié par JENCAL (03 Mar 2016 - 17:08)

Pal mal ton exemple Jencal mais ce qui me gênerais c'est d'utiliser des objets de formulaires pour des effets de style.

Une autre possibilité en pur css est de réaliser un spoiler.

Grosso-modo il s'agit de placer le contenu à afficher(ou masquer) au sein d'une DIV et de se servir de deux liens pour réaliser l'action. Du côté du Css, le sélecteur ~ sera notre allié.

Les détails et la technique sont consultables sur l'article du Hollandais Volant : Réaliser un spoiler en Css

Perso, j'utilise ce système pour une mini-Faq sur mon site.

Bonsoir,

on peut faire une base plus simple en trois lignes et un lien + 1 div

<a href="#">Show div 1</a>
<div>div 1 </div>

a + div {display:none;}
a:focus + div {display:block;}
a:focus {pointer-events:none;}

pour jouer avec http://codepen.io/gcyrillus/pen/ZWGZaR

Raphael a écrit :


C'est très ingénieux, bien joué !
Tu es tombé sur cette astuce seul en faisant des tests ou tu l'as découvert ailleurs durant ta veille ?

(PS : attention quand-même, ce n'est pas compatible sur les anciennes versions d'IE : http://caniuse.com/#feat=pointer-events et ce n'est pas une spécification "officielle" )

Je suis étonné que tu n'aies pas pensé à cette forme de ciblage vu que tu as pas mal d'expérience aussi. Moi même, j'ai déjà fait un menu déroulant ou autres trucs de genre avec cette technique.

En tout cas, merci aussi. Je ne savais pas qu'on pouvait faire une trnasition sur le display. Je pensais que le rendu serait comme un height:0 /auto

Raphael a écrit :


C'est très ingénieux, bien joué !
Tu es tombé sur cette astuce seul en faisant des tests ou tu l'as découvert ailleurs durant ta veille ?

(PS : attention quand-même, ce n'est pas compatible sur les anciennes versions d'IE : http://caniuse.com/#feat=pointer-events et ce n'est pas une spécification "officielle" )

non il y a un moment que je joue avec ça, a+href fait l’économie du tabindex décrié

niuxe a écrit :

Je ne savais pas qu'on pouvait faire une trnasition sur le display. Je pensais que le rendu serait comme un height:0 /auto

si tu parle de la demo que j'ai laissé en ligne, la transition se fait sur le font-size,

j'avais tenté sur les valeurs de flex, (flex: 1 1 0; > flex: 1 1 100%; )mais ça ne passe pas ... sans déterminer une hauteur au conteneur au préalable
Sans hauteur référente du parent il faut alors une valeur autre qu'en pourcentage, donc même galère que height
Modifié par gcyrillus (04 Mar 2016 - 11:29)

niuxe a écrit :


Je suis étonné que tu n'aies pas pensé à cette forme de ciblage vu que tu as pas mal d'expérience aussi. Moi même, j'ai déjà fait un menu déroulant ou autres trucs de genre avec cette technique.

Je parle bien de l'astuce du pointer-events: none; on est d'accord ?

(pour ce qui est des événements :focus, :target, :checked et autres permettant de faire un clic en CSS, oui je connais )

Pardon de polluer le sujet avec une nouvelle question, mais quel est l'utilité pointer-events: none; ?
Modifié par JENCAL (04 Mar 2016 - 12:24)

pour le pointer-events, voici 3 autres exemples /test

1 menu sans transition - http://codepen.io/gc-nomade/details/Kakge/ et
comme ici transition sur font-size http://codepen.io/gc-nomade/pen/tiuvo
un énième diaporama http://codepen.io/gc-nomade/pen/akIht click passe au travers d'un bouton pour donner le :focus a l'image précédente ou suivante.

Pour la curiosité, simulation d'un child:hover< parent + adjacent http://codepen.io/gc-nomade/pen/bjcql

:focus {pointer-events:none;} / :not(:focus) { pointer-events:auto } donne un effet de toggle en CSS , ce qui permet de tester un effet sans en passer par javascript, c'est le premier intérêt que je lui ai porté (comme tabindex pour attrapé un click).

C'est comme mettre des ombrages ou des couleurs de fond aux éléments pour vérifier qu'ils sont bien aux endroits attendus.

Avant l'apparition de cssdeck, jsfiddle, codepen, ... je faisais mon apprentissage en autodidacte avec un éditeur éphémère maison. la toute première version encore en ligne http://gcyrillus.free.fr/editeur-fmr/ , par la suite , tout passer par une popup (avec le choix d'un doctype) pour avoir un document valide (IE6 et son mode quirk en mode frame ), c'est plus ludique que de lire les spécifications en premier lieu, je teste puis je lis.

Pour la veille, les forums sont de vrai mines d'or.

gcyrillus a écrit :
pour jouer avec http://codepen.io/gcyrillus/pen/ZWGZaR

Génial, je fork. Mes futurs menus accordéons vont en profiter (et pas seulement eux)...

Olivier C a écrit :

Génial, je fork. Mes futurs menus accordéons vont en profiter (et pas seulement eux)...

J'aime beaucoup l'idée également.

Du coup j'ai fait quelques tests et j'ai observé que le résultat était plus ou moins compatible selon l'élément de bouton choisi.
Il se trouve que le plus approprié (<button>) était également le moins bien reconnu, en tout cas sur Mac et iOS : http://codepen.io/raphaelgoetter/pen/dMYpVx?editors=1100

(ou alors j'ai raté une bidouille importante pour que cela fonctionne)

De mon côté voilà où j'en suis : CodePen.

Je suis confronté à quelques limitations que j'expose dans le Pen.

Olivier C a écrit :
Je suis confronté à quelques limitations que j'expose dans le Pen.

- Pour le cursor-pointer perdu sur le pointer-events: none, là à chaud j'aurais envie de tenter de générer en CSS un élément vide par-dessus et qui aurait un cursor: pointer. Un peu cracra mais ça me semble jouable.
- Pour le font-size en transition : de toute façon ça me semble trop risqué. Notamment parce que ça casse toute possibilité d'appliquer des padding ou des border en "em" à l'élément notamment. Je préfère encore un max-height 0 -> valeur, éventuellement combiné avec un scaleY(0) -> scaleY(1) Cf. mon test.
Modifié par Raphael (04 Mar 2016 - 17:11)

Raphael a écrit :
Je préfère encore un max-height 0 -&gt; valeur, éventuellement combiné avec un scaleY(0) -&gt; scaleY(1) Cf. mon test.

J'ai les mêmes problèmes avec cette solution. Ce qui me donne l'impression que ce sera le cas avec toutes les solutions prises en charge par transition. Je m'arrête là pour l'instant mais je chercherais des soluces.

Si je trouve quelque chose d'intéressant je posterais ici.

Olivier C a écrit :

J'ai les mêmes problèmes avec cette solution.

Du coup je n'ai pas compris ton problème. Je ne vois pas en quoi un max-height rendrait les liens non cliquables

EDIT : ah mais oui je viens de comprendre. En effet les liens internes ne sont pas cliquables.
C'est d'ailleurs également le cas sur la démo de gcyrillus : http://codepen.io/gc-nomade/pen/Kakge/ Rien ne se passe si on essaye d'atteindre un lien d'un sous-menu.

Là c'est tout de suite carrément bloquant
Modifié par Raphael (04 Mar 2016 - 18:27)

il est en effet préférable de cibler un élément adjacent plutôt qu'un parent pour se servir de pointer-events dans ce cas.

Voici un menu qui fonctionne apparemment http://codepen.io/gcyrillus/pen/pyjrjP
(test transition sur line height ce coup-ci)

gcyrillus a écrit :
il est en effet préférable de cibler un élément adjacent plutôt qu'un parent pour se servir de pointer-events dans ce cas.

Voici un menu qui fonctionne apparemment http://codepen.io/gcyrillus/pen/pyjrjP
(test transition sur line height ce coup-ci)

Justement, les tests d'Olivier et le mien ciblent un élément adjacent et pourtant les liens internes ne sont pas fonctionnels :
- http://codepen.io/olivier-c/pen/pyjeeW?editors=1100
- http://codepen.io/raphaelgoetter/pen/dMYpVx?editors=1100

Du coup, je ne vois pas ce qui fait que cela fonctionne chez toi

EDIT : non mais en fait je dois avoir un autre problème chez moi. Même en supprimant tous les styles et en ne conservant que les liens, ils ne sont toujours pas cliquables !

Second EDIT : en remplaçant mes liens par des liens menant vers l'URL de Codepen, tout fonctionne à présent. Il y a une explication à cela ?!
Modifié par Raphael (04 Mar 2016 - 19:58)

Raphael a écrit :

Second EDIT : en remplaçant mes liens par des liens menant vers l'URL de Codepen, tout fonctionne à présent. Il y a une explication à cela ?!

probablement une sécurité de codepen pour que des pages externes ne soit pas chargées dans leur frame leur site.Je l'avais déjà remarqué , me servant de google.com souvent comme test ....

<edit> codepen permet de recuperer un fichier zip du pen ouvert (en bas a droite) a des fins de test en 'stand alone'.
Modifié par gcyrillus (04 Mar 2016 - 21:21)

gcyrillus a écrit :
Voici un menu qui fonctionne apparemment http://codepen.io/gcyrillus/pen/pyjrjP

En fait chez moi ce code ne fonctionne pas non plus...

Mais précisons : les liens adjacents fonctionnent - environ une fois sur deux - si je clique dessus alors que la transition n'est pas encore terminée (c'est aussi le cas pour mon accordéon), mais une fois la transition achevée ces liens sont bloqués.

J'ai fais des tests hors environnement CodePen et j'ai le même problème. Et à ce propos, j'ai moi aussi rencontré des problèmes avec ce site, mais plutôt liés à du cache non vidé après la MAJ d'un code.