[Résolu] Cacher et montrer des objets html

Bonjour,

Dans un fil précédent, je demandais s'il y avait un moyen de réutiliser comme argument propriété d'une nouvelle classe, dans une même feuille de style, le nom d'une classe précédemment créée. J'ai bien compris que ce n'est pas possible, du moins actuellement.

Je travaillais sur un dispositif que je souhaite propager dans mon site, très pratique dans bien des circonstances, surtout sur un écran de smartphone.

Dans le cas décrit ici, un premier élément en contient jusqu'à dix autres, chacun dépliable et repliable, le repliage du principal cachant tous ceux qu'il contient.

Pour gagner de la place dans le CSS et le code html, l'ID principal est "ob1" comme objet (div par exemple), les objets secondaires étant nommés "ob101" etc...

Voilà pour le pointage des attributs ID.

La classe orientant l'état de l'objet (plié ou déplié) se nomme dans cette hiérarchie "cl1" puis "cl101" "cl102" etc...

J'ai donc avec cela le nécessaire pour générer l'objet radio ou checkbox, le label, et l'élément pliable et dépliable à volonté, qui forment un groupe d'objets nécessaires à la réalisation.

Ce sont des algorithmes qui assemblent tout çà en dynamique au chargement de la page html.

Dans le CSS, l'énumération les classes cachant par défaut l'objet au chargement de la page ne pose aucun de problème de place.

.cl1,.cl101,.cl102,.cl103,.cl104,.cl105,.cl106,.cl107,.cl108,.cl109,.cl110{display:none}

Par contre, si je trouvais un moyen aussi radical pour énumérer ce qui suit, et qui permettrait de n'exprimer qu'une fois :checked~ et {display:block}, j'aurais l'impression d'avoir progressé.

#ob1:checked~.cl1{display:block}
#ob101:checked~.cl101{display:block}
#ob102:checked~.cl102{display:block}
#ob103:checked~.cl103{display:block}
#ob104:checked~.cl104{display:block}
#ob105:checked~.cl105{display:block}
#ob106:checked~.cl106{display:block}
#ob107:checked~.cl107{display:block}
#ob108:checked~.cl108{display:block}
#ob109:checked~.cl109{display:block}
#ob110:checked~.cl110{display:block}

Mais je n'ai rien trouvé à lire, peut-être parce que j'ai mal cherché. Aucune expérience n'a donné de résultat.

Il y a tellement de possibilités dans le CSS que cette description inspirera peut-être un des experts qui fréquentent ce forum.

Un grand merci en tout cas d'avance à qui aurait une bonne piste à creuser.

Et bonne journée à tous.

Bonjour,

Vous pourriez simplifier tout ceci en vous basant sur le sélecteur d'attribut je pense.

[class^="cl"] {
  display: none;
}
/* masquer les éléments dont la classe commence par "cl" */

[id^="ob"]:checked ~ [class^="cl"]:first-of-type {
  display: block;
}
/* Afficher en bloc le premier élément d'un type dont la classe commence par "cl" adjacent à un élément coché dont l'identifiant commence par "ob" */

A tester.
Modifié par Greg_Lumiere (08 Mar 2017 - 08:17)

Merci beaucoup Greg,

C'est exactement ce que je recherchais, et même mieux puisque je ne pensais pas possible de gagner encore de la place sur la première partie de cette déclaration.

J'avais vu passer ce principe de sélecteur d'attribut, mais sans percuter sur les applications.

De belles heures de travail m'attendent à présent pour mettre en place cette nouveauté dans mon code.

Très bonne journée à tous, et merci encore Greg.

Merci, de rien et bonne journée à vous aussi.