Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Des onglets et accordions responsives

Sur un script de bhaveshcmedhekar (licence MIT) adapté par Lomart

Version 2.5 Prise en charge des attributs class et style des titres d'onglets. Possibilité d'ouvrir un onglet en ajoutant son ID dans l'URL de la page.

🆙 tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite.

Cliquer pour lire la documentation

Mode responsive avec gestion de l'espacement vertical
{up tab}
< h4>texte onglet< /h4>
< p>texte du panneau< /p>
< img src="/..">
{/up tab}
Sur mobile ou sur demande, l'affichage est en mode accordion
script JS adapté par Lomart pour gestion répartition verticale
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: Script de bhaveshcmedhekar @tags: layout-dynamic
  • tab = tab: tab ou accordion
  • auto: 0 ou delai en millisecondes pour changement automatique d'onglet

Style des titres (onglets)

  • title-tag = h4: balise utilisée pour les titres onglets
  • title-style: classe(s) et style inline onglets
  • title-class: classe(s) onglets (obsolète)

Style des panneaux de contenu

  • content-style: classe(s) et style inline contenu
  • content-class: classe(s) contenu (obsolète)
  • espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir

Style du bloc principal

  • id: identifiant
  • style: classe(s) et style(s) bloc principal
  • class: classe(s) bloc principal (obsolète)
  • css-head (base-css): règles CSS mises dans le head

paramètres Javascript pour configuration

  • side: left ou right
  • active_tab: 1 a N
  • plugin_type: accordion (interne, ne pas modifier)
  • content_display = block: interne, ne pas modifier, défini par espace-vertical
Version 1.62
ajout option auto par pleconte et correction regex
Version 1.7
ajout option css-head, espace-vertical et content_display.
Version 2.9
ajout option preserve-tag
Version 3.1
possibilité de changer d'onglet à partir d'un lien dans l'URL ou dans la page. Plus d'infos

Ce script affiche du contenu dans des panneaux avec des onglets en haut, à gauche ou à droite. Sur petit écran, l'affichage se transforme en accordion.

Avec des onglets

les onglets au-dessus

  • question n°1
  • question n°2
  • question n°3
  • question n°4

texte pour la question n°1

texte pour la question n°2 mais un peu plus long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Consequentia exquirere, quoad sit id, quod volumus, effectum. Itaque in rebus minime obscuris non multus est apud eos disserendi labor. At ego quem huic anteponam non audeo dicere; Duo Reges: constructio interrete.

Qualem igitur hominem natura inchoavit? Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Hoc loco discipulos quaerere videtur, ut, qui asoti esse velint, philosophi ante fiant. An tu me de L. Ergo id est convenienter naturae vivere, a natura discedere. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim?

Et hercule-fatendum est enim, quod sentio -mirabilis est apud illos contextus rerum. Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Bork Negare non possum.

3 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque hic ipse iam pridem est reiectus; Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Quia nec honesto quic quam honestius nec turpi turpius. Naturales divitias dixit parabiles esse, quod parvo esset natura contenta. Quid iudicant sensus? Duo Reges: constructio interrete. Quamquam tu hanc copiosiorem etiam soles dicere.

Quod si ita se habeat, non possit beatam praestare vitam sapientia. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P. Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Quae quo sunt excelsiores, eo dant clariora indicia naturae. Reguli reiciendam; Si enim ita est, vide ne facinus facias, cum mori suadeas.

Scio enim esse quosdam, qui quavis lingua philosophari possint;

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Nunc omni virtuti vitium contrario nomine opponitur. Neque solum ea communia, verum etiam paria esse dixerunt. Duo Reges: constructio interrete. Estne, quaeso, inquam, sitienti in bibendo voluptas?

Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Nulla profecto est, quin suam vim retineat a primo ad extremum. Ad eas enim res ab Epicuro praecepta dantur. Facit enim ille duo seiuncta ultima bonorum, quae ut essent vera, coniungi debuerunt; Philosophi autem in suis lectulis plerumque moriuntur. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur?

<p>{up tab | active_tab=2 }</p>
<h4><img src="/images/icons/flag/fr.png" alt=""/> question n°1</h4>
<p>texte pour la question n°1</p>
<h4><img src="/images/icons/flag/be.png" alt=""/>  question n°2</h4>
<p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
<h4><img src="/images/icons/flag/us.png" alt=""/> question n°3</h4>
<p>3 : {up lorem=3,decorate}</p>
<h4><img src="/images/icons/flag/gb.png" alt=""/> question n°4</h4>
<p>4 : {up lorem=2}</p>
<p>{/up tab}</p>

Le contenu est organisé dans une structure simple: un titre h4 est le libellé de l'onglet, tout le code suivant jusqu'au prochain titre est son contenu.

title-class & title-style
personnalisation pour les onglets
content-class & content-style
personnalisation pour les panneaux de contenu
title-tag
non utilisé dans l'exemple, cette option permet d'utiliser une autre balise que h4 pour identifier le titre des onglets

Note: pour avoir directement un accordion, vous pouvez le demander par { up tab=accordion ...


les onglets sur le côté

Cette partie de la démo a été réecrite en novembre 2019 pour utiliser les fonctionnalités de la version 1.7 de UP

Pour cet exemple, nous allons mettre en oeuvre plusieurs options pour améliorer le rendu.

  • Onglet n°1
  • 1 ligne
  • 2 lignes
  • 3 lignes
  • 4 lignes
  • non espacé

Titre du premier onglet

🆙
un petit UP bien centré entre le titre et le pied

Une ligne tout en bas pour démontrer l'action de option espace-vertical

une unique ligne alignée en haut

une première ligne en haut

une deuxième ligne en bas

une première ligne en haut

une deuxième ligne au centre

une troisième ligne en bas

une première ligne

une deuxième ligne

une troisième ligne

une quatrième ligne en bas

une première ligne en haut

une deuxième juste au dessous. Voir les explications ligne 35
Le shortcode et les explications juste après
{up tab | side=left
| title-style=width:15% 
| content-class=bg-jauneClair  
| content-style=min-width:85%;min-height:350px
| espace-vertical=1
| auto=8000
| css-head=
  #id > ul li[border-left:1px solid #bbb]
  #id > ul li::after[width:0]
  #id > ul li.active[background:yellow]
  #id > ul li.active::after[background:red;width:10px]
  #id div.accordian_header[background:#fff] /*pour mobile*/
  #id .tab_content p [margin:0] /*pour demo */
}

<h4>Onglet n°1</h4>
	<h2 class="tc notoc">Titre du premier onglet</h2>
	<p class="tc">{up icon=Ux1F199,48}<br>un petit UP bien centré entre le titre et le pied</p>
	<p style="border-top: dashed 1px #069; margin-bottom:0">Une ligne tout en bas pour démontrer l'action de l'option espace-vertical</p>
<h4>1 ligne</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une unique ligne alignée en haut</p>
<h4>2 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne en bas</div>
<h4>3 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne au centre</div>
	<p>{up icon=Ux278C,#069,48px} une troisième ligne en bas</p>
<h4>4 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne</div>
	<p>{up icon=Ux278C,#069,48px} une troisième ligne</p>
	<p>{up icon=Ux278D,#069,48px} une quatrième ligne en bas</p>
<h4>non espacé</h4>
	<div>
		<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
		<div>{up icon=Ux278B,#069,48px} une deuxième juste au dessous. Voir les explications ligne 35</div>
	</div>
{/up tab}
Les explications
Ligne commentaire
1 side=left pour mettre les onglets à gauche. right pour la droite. Sur mobile ou petit écran, les onglets se transformenr en accordions
2 title-style réduit la largeur des onglets
3 content-class ajoute un fond jaune clair aux contenus
4 content-style pour compenser la réduction de largeur des onglets et donner une hauteur minimale afin d'éviter les scintillements d'affichage dûs aux changement de hauteur
5 espace-vertical est une nouvelle option (v1.7) qui permet de répartir le contenu verticalement dans la hauteur de l'onglet. Il suffit d'indiquer la profondeur des blocs à répartir. Pratiquement, si 1 n'a aucun effet, essayez 2.
Cette option a été créée pour afficher l'introduction des articles avec l'action jcontent_by_categories. C'est donc une option partagée par tous les onglet
Une fonctionnalité similaire est offerte par les nouvelles règles de up.css : bg-vspace-between, bg-vspace-between-1 et bg-vspace-between-2
6 auto est la durée (en millisecondes) avant le changement automatique d'onglet. Un clic sur un onglet stoppe le défilement.
7 css-head va nous permettre d'ajouter des règles CSS spécifiques à cette boîte à onglets (#id sera remplacé par l'ID réelle).
Si les styles sont partagés par plusieurs onglets, il est préférable d'ajouter les classes avec l'action addcsshead et d'ajouter l'option class=nom_de_la_classe_dans_addcsshead
8-11 ces règles définissent le style des onglets
12 permet de forcer la couleur de fond en vue accordion
13 une règle spécifique à la démo pour supprimer les marges des balises P afin de mieux percevoir la répartition verticale
Pour le contenu, je vais uniquement relever les points délicats
17 la classe "notoc" est spécifique à la démo. Elle indique à l'action toc de ne pas ajouter ce titre au sommaire
18 une nouveauté de la version 1.7 : il est possible de mettre des shortcodes dans les shortcodes.
Une autre nouveauté est la refonte de l'action icon qui gère maintenant les fontes d'icônes, les caractères Unicode et les images à partir d'un unique shortcode. Ici, j'insère le caractère Unicode UP! en taille 48 px.
31 notez que l'on peut mélanger les types de balises, c'est uniquement sa profondeur qui est prise en compte pour la répartition verticale. Vous devez comprendre maintenant pourquoi j'ai mis espace-vertical=1. Les blocs sont des enfants direct du bloc contenu.
35 pour ne pas répartir verticalement les blocs, il suffit de les changer de profondeur. Ici dans un bloc DIV

Accordion

Bien que la fonction première de cette action est d'afficher du contenu dans des onglets, il est possible de l'afficher dans un accordion.
Il suffit d'indiquer accordion comme argument de tab

{up tab=accordion}
  • accordion n°1
  • accordion n°2
  • accordion n°3
  • accordion n°4

texte pour la question n°1

texte pour la question n°2 mais un peu plus long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclarae mortes sunt imperatoriae; In qua quid est boni praeter summam voluptatem, et eam sempiternam? Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Sed ea mala virtuti magnitudine obruebantur. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Sed quia studebat laudi et dignitati, multum in virtute processerat. Bonum integritas corporis: misera debilitas. Duo Reges: constructio interrete. Illo enim addito iuste fit recte factum, per se autem hoc ipsum reddere in officio ponitur. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. -, sed ut hoc iudicaremus, non esse in iis partem maximam positam beate aut secus vivendi.

Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Ecce aliud simile dissimile. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Nam ista vestra: Si gravis, brevis; Hoc est non modo cor non habere, sed ne palatum quidem. Nescio quo modo praetervolavit oratio. Ut in geometria, prima si dederis, danda sunt omnia.

Torquatus, is qui consul cum Cn. Praeclarae mortes sunt imperatoriae; Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Hoc non est positum in nostra actione. Sed quae tandem ista ratio est?

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nemo nostrum istius generis asotos iucunde putat vivere. Si sapiens, ne tum quidem miser, cum ab Oroete, praetore Darei, in crucem actus est. Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae dicere. Effluit igitur voluptas corporis et prima quaeque avolat saepiusque relinquit causam paenitendi quam recordandi. Illis videtur, qui illud non dubitant bonum dicere -; Sit enim idem caecus, debilis. Duo Reges: constructio interrete. Bork Ad eos igitur converte te, quaeso. Ergo in utroque exercebantur, eaque disciplina effecit tantam illorum utroque in genere dicendi copiam.

Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Cum praesertim illa perdiscere ludus esset. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Aberat omnis dolor, qui si adesset, nec molliter ferret et tamen medicis plus quam philosophis uteretur. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt, paria noluerunt. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Non autem hoc: igitur ne illud quidem. Occultum facinus esse potuerit, gaudebit; Quis enim redargueret?

Cur igitur, cum de re conveniat, non malumus usitate loqui? Inde igitur, inquit, ordiendum est. Verum audiamus. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Nam de isto magna dissensio est. Verba tu fingas et ea dicas, quae non sentias? Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere.

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Sed tu istuc dixti bene Latine, parum plane. Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Duo Reges: constructio interrete. Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio. Idemque diviserunt naturam hominis in animum et corpus. Ego vero volo in virtute vim esse quam maximam;

Cur ipse Pythagoras et Aegyptum lustravit et Persarum magos adiit? Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Inde sermone vario sex illa a Dipylo stadia confecimus. Addo etiam illud, multa iam mihi dare signa puerum et pudoris et ingenii, sed aetatem vides. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Quorum sine causa fieri nihil putandum est. Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant.

CSS évolué

Si les options proposées ne suffisent pas pour répondre à votre demande, vous pouvez utiliser l'option css-head pour spécifier votre CSS.

Pour la démonstration, je vais reprendre le premier exemple de cette démo

  • question n°1
  • question n°2
  • question n°3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An tu me de L. Erat enim Polemonis. Duo Reges: constructio interrete. Apparet statim, quae sint officia, quae actiones. Quacumque enim ingredimur, in aliqua historia vestigium ponimus.

Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Audeo dicere, inquit. Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Sin laboramus, quis est, qui alienae modum statuat industriae?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summus dolor plures dies manere non potest? Nam ante Aristippus, et ille melius. At miser, si in flagitiosa et vitiosa vita afflueret voluptatibus. Non enim ipsa genuit hominem, sed accepit a natura inchoatum. Duo Reges: constructio interrete. Eadem nunc mea adversum te oratio est. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Ac ne plura complectar-sunt enim innumerabilia-, bene laudata virtus voluptatis aditus intercludat necesse est.

Si longus, levis. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Utrum igitur tibi litteram videor an totas paginas commovere? Nos vero, inquit ille; Et non ex maxima parte de tota iudicabis? Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Et quidem Arcesilas tuus, etsi fuit in disserendo pertinacior, tamen noster fuit;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae est igitur causa istarum angustiarum? Si quidem, inquit, tollerem, sed relinquo. Aliter enim nosmet ipsos nosse non possumus. Duo Reges: constructio interrete. Hunc vos beatum; Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens. Rhetorice igitur, inquam, nos mavis quam dialectice disputare? Quamvis enim depravatae non sint, pravae tamen esse possunt.

Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Sed haec nihil sane ad rem; Hoc loco discipulos quaerere videtur, ut, qui asoti esse velint, philosophi ante fiant. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Sit hoc ultimum bonorum, quod nunc a me defenditur; Quare conare, quaeso. Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Paupertas si malum est, mendicus beatus esse nemo potest, quamvis sit sapiens.

{up tab | active_tab=2
| css-head=
#id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]
#id .tab_3[background:plum] #id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]
}
<h4><img src="/images/icons/flag/fr.png" alt="" /> question n°1</h4>
{up lorem=2,decorate}
<h4><img src="/images/icons/flag/be.png" alt="" /> question n°2</h4>
{up lorem=2,decorate}
<h4><img src="/images/icons/flag/us.png" alt="" /> question n°3</h4>
{up lorem=2,decorate}
{/up tab}

La modification des couleurs pour le premier et troisième onglet est uniquement fait par l'option css-head.

La première ligne définit 1 attribut (background:coral) que l'on applique à 3 sélecteur CSS :

#id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]
  1. #id .tab_1 : le contenu de l'onglet
  2. #id \[rel="tab_1"\] : l'onglet
  3. #id \[rel="tab_1"\].active:after : élément qui cache la bordure basse de l'onglet actif

La deuxième ligne définit 2 attributs : fond violet pour le contenu de l'onglet et fond violet, texte blanc pour l'onglet:

#id .tab_3[background:plum] 
#id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]

C'est similaire au premier onglet, sauf que le contenu est défini à part.

Pour mémoire :

  • #id sera remplacé par l'ID de l'action afin que la règle soit limitée à celle-ci
  • UP n'accepte pas les accolades {} dans les shortcodes, il faut les remplacer par des crochets []
  • pour utiliser des crochets [], il faut les échapper avec un antislash devant \[\]

version 2.5 : Si vous attribuer des attributs class et style, ils seront pris en compte

Le shortcode en mode code pour voir les attributs ajoutés
<p>{up tab | content-class=bg-white}</p>
<h4 class="bg-purple  bg-hover-blue" style="color: yellow;">Onglet 1</h4>
<p>Texte 1</p>
<h4 class="bg-green  bg-hover-blue" style="color: yellow; border-bottom: red dotted 2px;">Onglet 2</h4>
<p>Texte 2</p>
<p>{/up tab}</p>
  • Onglet 1
  • Onglet 2

Texte 1

Texte 2

Ouvrir la page sur un onglet

Depuis la version 2.5, il est possible d'ouvrir la page sur un onglet identifié par son ID

Par défaut, les onglets ont un identifiant tab_1, tab_2, etc. Mais, je vous conseille de les attribuer vous-même en mode code, il seront plus facile à mémoriser et surtout plus parlant !

Sur ce site, j'utilise cette possibilité pour ouvrir les articles références comme celui sur la personnalisation de UP.
Le bouton ci-contre ouvre la boite à onglets avec CSS ouvert.

{up modal=index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css
 | label=&#x1F199; personnaliser le CSS de UP | class=btn btn-primary}

Il y a beaucoup d'avantage à utiliser l'action modal :

Pour en revenir à notre shortcode, l'option principale contient l'URL de l'article à laquelle on ajoute &tmpl=component et l'ancre pour ouvrir l'onglet. Je définis également le libellé du bouton et son style.

En réalité, j'ai crée une prefset pour chacune des pages appelées.

Donc mon shortcode est {up modal=memo-custom-css}. C'est plus court et surtout plus lisible !

Mon fichier prefs.ini contient une section

[memo-custom-css]
label="&#x1F199; personnaliser le CSS de UP"
class="btn btn-primary "
modal="index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css"
Pour vous souvenir des prefsets, c'est très simple ! Vous affichez la page avec le shortcode {up modal | ?}

Changer d'onglet

Depuis la version 3.1, il est possible de changer d'onglet en ajoutant une ancre dans le lien. Une petite démo pour comprendre le principe.

La démo

  • Onglet 1
  • Onglet 2
  • Onglet 3

Texte de l'onglet 1

Texte de l'onglet 2

Revenir sur le premier onglet

Texte de l'onglet 3

Retour sur onglet 1

Ouvrir cette page en allant sur le deuxième onglet

et le code correspondant

<p>{up tab}</p>
<h4 id="demo-ancre-1";>Onglet 1</h4>
<p>Texte de l'onglet 1</p>
<h4 id="demo-ancre-2">Onglet 2</h4>
<p>Texte de l'onglet 2</p>
<p><a href="/#demo-ancre-1">Revenir sur le premier onglet</a></p>
<p>{/up tab}</p>
<p><a href="/demo?amp;view=article&amp;id=39&amp;catid=8<mark>#demo-ancre-2">Ouvrir cette page en allant sur le deuxième onglet</a></p>
<p>{/up tab}</p>

J'ai ajouté un ID aux balises h4 des onglets pour qu'ils soient uniques.

Ensuite, il suffit de l'ajouter seul pour un déplacement dans la page ou à la fin du lien d'une autre page.

Je vous laisse analyser le code pour comprendre.

Si vous êtes faché avec le mode code, voici une solution 100% UP que j'utilise dans la démo ci-dessus pour définir le 3e onglet

{up html=h4 | id=demo-ancre-3}Onglet 3{/up html
Texte de l'onglet 3
{up html=a | href=#demo-ancre-1}Retour sur onglet 1{/up html}

Personnalisation

Si vous utilisez souvent cette action, il peut être judicieux de l'adapter à votre besoin et au design de votre site.

Pour en savoir plus : 🆙 Comment personnaliser une action

Pour info, cette page utilise 46 action(s) :
upactionslist (1) readmore (2) csv2def (1) tabslide (1) toc (1) tab (6) lorem (9) icon (13) csv2table (1) flexauto (1) div (2) flexbox (1) modal (2) html (2) note (1) addcsshead (1) jcontent-info (1)