Choisissez Insertion > Spry > Accordéon Spry.
Dernière mise à jour le
1 mai 2021
Remarque :
Les widgets Spry ont été remplacés par des widgets jQuery sous Dreamweaver CC et versions ultérieures. Bien qu’il soit toujours possible de modifier des widgets Spry sur votre page, vous ne pouvez pas en ajouter de nouveaux.
À propos du widget Accordéon
Un widget Accordéon est un ensemble de panneaux réductibles pouvant stocker une grande quantité de contenu tout en restant compact. Les visiteurs du site affichent ou masquent le contenu stocké dans l’accordéon en cliquant sur l’onglet du panneau. Les panneaux de l’accordéon se développent ou se réduisent à mesure que le visiteur clique sur les différents onglets. Dans un accordéon, un seul panneau de contenu est ouvert et visible à tout moment. L’exemple suivant montre un widget Accordéon dont le premier panneau est développé :
A. Onglet du panneau accordéon B. Contenu du panneau accordéon C. Panneau accordéon (ouvert)
Le code HTML par défaut du widget Accordéon comprend une balise div extérieure contenant tous les panneaux, une balise div pour chaque panneau, ainsi qu’une balise div d’en-tête et une balise div de contenu à l’intérieur de la balise pour chaque panneau. Un widget Accordéon peut contenir n’importe quel nombre de panneaux distincts. Le code HTML du widget Accordéon comprend également des balises script dans l’en-tête du document et après le marquage HTML de l’accordéon.
Vous trouverez une explication plus détaillée du fonctionnement du widget Accordéon, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_spryaccordion_fr.
Pour consulter un didacticiel relatif à l’utilisation du widget Accordéon, rendez-vous à l’adresse suivante : www.adobe.com/go/vid0167_fr.
Insertion et modification du widget Accordéon
Insertion du widget Accordéon
Remarque :
Vous pouvez également insérer un widget Accordéon par l’intermédiaire de la catégorie Spry du panneau Insertion.
Ajout d’un panneau à un widget Accordéon
-
Sélectionnez un widget Accordéon dans la fenêtre de document.
-
Cliquez sur le bouton Plus (+) de l’inspecteur Propriétés (Fenêtre > Propriétés).
-
(Facultatif) Modifiez le nom du panneau en sélectionnant son texte en mode Création puis en apportant les modifications désirées.
Suppression d’un panneau d’un widget Accordéon
-
Sélectionnez un widget Accordéon dans la fenêtre de document.
-
Dans le menu Panneaux de l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à supprimer puis cliquez sur le bouton Moins (-).
Ouverture d’un panneau à modifier
-
Effectuez l’une des opérations suivantes :
Placez le pointeur de la souris au-dessus de l’onglet du panneau pour l’ouvrir en mode Création, puis cliquez sur l’icône en forme d’œil qui s’affiche sur la droite de l’onglet.
Sélectionnez un widget Accordéon dans la fenêtre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l’inspecteur Propriétés (Fenêtre > Propriétés).
Modification de l’ordre des panneaux
-
Sélectionnez un widget Accordéon dans la fenêtre de document.
-
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau accordéon à déplacer.
-
Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre le panneau.
Personnalisation du widget Accordéon
Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Accordéon, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Accordéon de manière à créer un accordéon adapté à vos besoins.
Pour savoir comment modifier les couleurs du widget Accordéon, consultez l’article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais).
Vous trouverez la liste des tâches de définition de style avancées à l’adresse www.adobe.com/go/learn_dw_spryaccordion_custom_fr.
Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryAccordion.css. Dreamweaver enregistre le fichier SpryAccordion.css dans le dossier SpryAssets de votre site dès que vous créez un widget Accordéon Spry. Ce fichier contient également des informations commentées au sujet de divers styles qui s’appliquent au widget. Il peut dès lors être utile de consulter également le fichier.
Remarque :
Même s’il est facile de modifier directement les règles du widget Accordéon dans le fichier CSS, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS de l’accordéon. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.
Définition du style du widget Accordéon
Vous pouvez définir le style du texte d’un widget Accordéon en définissant des propriétés pour le conteneur entier du widget Accordéon, ou en définissant des propriétés distinctes pour chaque composant du widget.
-
Pour modifier le style du texte d’un widget Accordéon, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.
Texte à modifier
Règle CSS pertinente
Exemple de propriétés et de valeurs à ajouter
Texte dans l’accordéon entier (onglet et panneau de contenu)
.Accordion ou .AccordionPanel font: Arial; font-size:medium;
Texte dans les onglets du panneau accordéon uniquement
.AccordionPanelTab font: Arial; font-size:medium;
Texte dans les panneaux de contenu de l’accordéon uniquement
.AccordionPanelContent font: Arial; font-size:medium;
Modification des couleurs d’arrière-plan du widget Accordéon
-
Pour modifier les couleurs d’arrière-plan des différentes parties d’un widget Accordéon, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d’arrière-plan.
Partie du widget à modifier
Règle CSS pertinente
Exemple de propriété et de valeur à ajouter ou modifier
Couleur d’arrière-plan des onglets du panneau accordéon
.AccordionPanelTab background-color: #CCCCCC; (Valeur par défaut)
Couleur d’arrière-plan des panneaux de contenu de l’accordéon
.AccordionPanelContent background-color: #CCCCCC;
Couleur d’arrière-plan du panneau accordéon ouvert
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (Valeur par défaut)
Couleur d’arrière-plan des onglets de panneau lorsque le pointeur de la souris passe au-dessus
.AccordionPanelTabHover color: #555555; (Valeur par défaut)
Couleur d’arrière-plan de l’onglet de panneau ouvert lorsque le pointeur de la souris passe au-dessus
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (Valeur par défaut)
Limitation de la largeur d’un accordéon
Par défaut, le widget Accordéon se développe pour occuper l’espace disponible. Vous pouvez toutefois limiter la largeur d’un widget Accordéon en définissant une propriété « width » pour le conteneur de l’accordéon.
-
Repérez la règle CSS .Accordion en ouvrant le fichier SpryAccordion.css. Il s’agit de la règle qui définit les propriétés de l’élément conteneur principal du widget Accordéon.Remarque :
Vous pouvez également trouver cette règle en sélectionnant le widget Accordéon puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
-
Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.
Autres ressources similaires
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?