Développer et réduire du texte

Bonjour,
Je suis enseignant à domicile en maths et suis en train de saisir le contenu d'un futur site dans lequel je recopie mes (nombreux) manuscrits de cours et de corrigé d'exercices.
(Pour les expressions mathématiques, j'utilise le script Javascript MathJax qui permet de saisir des expressions directement dans le code html à l'aide d'une syntaxe somme toute assez intuitive et simple. Je recommande.)
Pour l'instant, j'en suis à la saisie au kilomètre et n'ai pas encore conçu de css.

Comme je reproduis l'approche pédagogique spécifique de mes cours oraux, mes articles, accompagnés de nombreux exemples de résolution, sont souvent longs.

Pour ne pas rebuter mes élèves, il est indispensable que je puisse masquer un bon nombre de sections (principalement balises <section> et quelques <div>) en donnant la possibilité de les développer et de les réduire à souhait.

Quelle(s) structure(s) me conseillerez-vous de saisir dans mon html sachant que je traiterai la mise en forme en css et la "mécanique" de développement-réduction plus tard ?

Vous remerciant d'avance pour vos conseils (toujours) pertinents et éclairés,
Boris

PS : Les sections développer - réduire peuvent être imbriquées.

Le coté "réduire ou non" ce gère en JavaScript (et bien plus facilement en jquery).

Je te renvoi vers ce lien pour comprendre la logique

Merci Jencal de cette piste.
Est-ce qu'il est cependant possible de placer un bouton Développer en début de section ou de div et un bouton Réduire en fin de section ou de div et ne pas attribuer d'identifiant à la section ou au div ? (Il faut bien évidemment que le bouton Développer soit affiché.
J'ai en effet beaucoup trop de portions de texte devant être développées - réduites pour attribuer un identifiant à chacune d'elles.

Oui, mais il va falloir codé un peu plus du coup car ta demande est assez farfelue

Tu peux le faire en pur CSS si tu n'as pas trop de blocs de texte à cacher :
https://codepen.io/bazooka07/pen/pVJNgz
Sinon on peut
soit insérer les balises qui vont bien côté serveur avec du PHP,
soit côté navigateur avec quelques lignes en javascript en jouant avec les class.
Modifié par bazooka07 (20 Apr 2018 - 11:25)

Ah oui, bien vu le checked, j'aurais du y pensé je gère mon rating star avec le même concept.....

https://codepen.io/JUSEN/pen/qopyGW

Bonjour,

Vous en rêviez, le W3C l'a fait ! En effet, il existe un balisage html dont la fonction est... TINDIN... de faire très exactement ceci :

<details>
  <summary>intitulé du paragraphe</summary>
  Contenu du paragraphe
  ...
</details>

Seulement il y a un hic, IE, Edge et Opera Mini (rien d'étonnant) restent de mauvais élèves et ne l'ont pas implémentés. Table de compatibilité

Autrement, uniquement en Css et sans élément de formulaire il y a une solution un brin plus complexe à mettre en oeuvre mais diablement efficace. Je vous invite à jeter un coup d’œil ici.

Le plus dur maintenant, c'est de choisir
Modifié par Greg_Lumiere (20 Apr 2018 - 11:45)

Cela serait au final plus simple avec une pointe de Javascript :
https://codepen.io/bazooka07/pen/GdJNba

Greg_Lumiere a écrit :
Bonjour,
Autrement, uniquement en Css et sans élément de formulaire il y a une solution un brin plus complexe à mettre en oeuvre mais diablement efficace. Je vous invite à jeter un coup d’œil ici.

Il y a un grain de sable sur le brin
Tu ne peux afficher qu'une définition à la fois
Cela remplace des boutons radios, pas des checkboxes.

Sinon <summary> est bon à savoir.
Reste à exclure les mauvais élèves
Modifié par bazooka07 (20 Apr 2018 - 12:04)

Pour rester dans une ambiance scolaire, permettez-moi de fayoter :
https://www.alsacreations.com/article/lire/1335-html5-details-summary.html
Par contre, je ne suis pas trop d'accord avec l'emploi du JQuery. Cela doit pouvoir se faire en pure javascript

bazooka07 a écrit :

Il y a un grain de sable sur le brin
Tu ne peux afficher qu'une définition à la fois
Cela remplace des boutons radios, pas des checkboxes.

Oui, c'est à la fois un inconvénient et à la fois un avantage.
L'inconvénient tel que tu l'évoque est qu'on ne puisse avoir tous les volets ouverts simultanément (si tant est que ce soit vraiment un inconvénient sauf si on veut absolument faire apparaître deux informations simultanément...).

Toutefois cela présente un avantage ergonomique car selon la méthode des checkboxes, qu'arrive-t'il lorsque tu as déplié toutes les boites et que tu souhaite revenir en haut de page en scrollant ? Je ne te le fais pas dire, l'épopée peut-être très longue.

Dans le fond une méthode n'est pas pire que l'autre, c'est simplement l'usage dont on veut en faire et le comportement recherché qui détermine la techno à utiliser.

Merci de toutes ces indications !

Greg_Lumiere a écrit :

Dans le fond une méthode n'est pas pire que l'autre, c'est simplement l'usage dont on veut en faire et le comportement recherché qui détermine la techno à utiliser.

Tout à fait juste, Greg !

Les sections peuvent être assez longues (par exemple une démonstration détaillée).
La réduction de la zone doit donc pouvoir être effectuée en bas de section ou de div de façon à ne pas imposer de remonter la partie affichée pour pouvoir la refermer.

D'autre part, l'élève peut tout à fait garder présentes plusieurs parties affichées si elle ou s'il estime que cela aide à sa compréhension. Je ne peux donc lui imposer de refermer une portion de texte pour ouvrir une autre.

En définitive, je vais, dans ma saisie au kilomètre,placer dans un premier temps des boutons html d'ouverture et de fermeture (j'ai bien évidemment enregistré des macros de saisie) :

<button type="button" onclick="Develop()" class="D_R">Développer</button>

<button type="button" onclick="Reduce()" class="D_R">Réduire</button>

et voir, dans un deuxième temps, comment écrire le code javascript ad hoc.

Merci encore.
Modifié par Borcade (20 Apr 2018 - 13:01)

Bon courage et bonne continuation !


Au pire, vous savez où nous trouver, hein ?

Absolument !