docs(accordion): update demos to always set accordion to 300px wide (#4153)

brandyscarney · web-flow · commit 2be1f3d69b5d · 2025-06-13T15:00:00.000-04:00
Co-authored-by: Brandy Smith &lt;6577830+brandyscarney@users.noreply.github.com&gt;
diff --git a/static/usage/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/basic/demo.html b/static/usage/v7/accordion/basic/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html
@@ -32,13 +32,8 @@
         --color: var(--ion-color-primary-contrast);
       }
 
-      .container {
-        width: 300px;
-        margin: 0 auto;
-      }
-
       ion-accordion-group {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
diff --git a/static/usage/v7/accordion/customization/expansion-styles/demo.html b/static/usage/v7/accordion/customization/expansion-styles/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/customization/theming/demo.html b/static/usage/v7/accordion/customization/theming/demo.html
@@ -30,6 +30,10 @@
       div[slot='content'] {
         background: rgba(var(--ion-color-rose-rgb), 0.25);
       }
+
+      ion-accordion-group {
+        width: 300px;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/readonly/group/demo.html b/static/usage/v7/accordion/readonly/group/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/readonly/individual/demo.html b/static/usage/v7/accordion/readonly/individual/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html
@@ -12,6 +12,10 @@
       .container {
         flex-direction: column;
       }
+
+      ion-accordion-group {
+        width: 300px;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v8/accordion/accessibility/animations/demo.html b/static/usage/v8/accordion/accessibility/animations/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/basic/demo.html b/static/usage/v8/accordion/basic/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html
@@ -32,13 +32,8 @@
         --color: var(--ion-color-primary-contrast);
       }
 
-      .container {
-        width: 300px;
-        margin: 0 auto;
-      }
-
       ion-accordion-group {
-        width: 100%;
+        width: 300px;
       }
     </style>
   </head>
diff --git a/static/usage/v8/accordion/customization/expansion-styles/demo.html b/static/usage/v8/accordion/customization/expansion-styles/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/customization/icons/demo.html b/static/usage/v8/accordion/customization/icons/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/customization/theming/demo.html b/static/usage/v8/accordion/customization/theming/demo.html
@@ -30,6 +30,10 @@
       div[slot='content'] {
         background: rgba(var(--ion-color-rose-rgb), 0.25);
       }
+
+      ion-accordion-group {
+        width: 300px;
+      }
     </style>
   </head>
 
diff --git a/static/usage/v8/accordion/disable/group/demo.html b/static/usage/v8/accordion/disable/group/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/disable/individual/demo.html b/static/usage/v8/accordion/disable/individual/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/listen-changes/demo.html b/static/usage/v8/accordion/listen-changes/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/multiple/demo.html b/static/usage/v8/accordion/multiple/demo.html
@@ -8,6 +8,12 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/readonly/group/demo.html b/static/usage/v8/accordion/readonly/group/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/readonly/individual/demo.html b/static/usage/v8/accordion/readonly/individual/demo.html
@@ -8,6 +8,12 @@
     <script src="../../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+
+    <style>
+      ion-accordion-group {
+        width: 300px;
+      }
+    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/accordion/toggle/demo.html b/static/usage/v8/accordion/toggle/demo.html
@@ -12,6 +12,10 @@
       .container {
         flex-direction: column;
       }
+
+      ion-accordion-group {
+        width: 300px;
+      }
     </style>
   </head>
 

Original file line number	Diff line number	Diff line change
`@@ -32,13 +32,8 @@`
`32`	`32`	`--color: var(--ion-color-primary-contrast);`
`33`	`33`	`}`
`34`	`34`
`35`		`- .container {`
`36`		`- width: 300px;`
`37`		`- margin: 0 auto;`
`38`		`- }`
`39`		`-`
`40`	`35`	`ion-accordion-group {`
`41`		`- width: 100%;`
	`36`	`+ width: 300px;`
`42`	`37`	`}`
`43`	`38`	`</style>`
`44`	`39`	`</head>`