Merge branch '983366-card' of https://github.com/syncfusion-content/blazor-docs into 983366-card

Author: praveensf4999

blazor-toc.html

@@ -4282,9 +4282,6 @@
 			<li>Getting Started
 				<ul>
 					<li> <a href="/blazor/smart-textarea/getting-started-webapp">Blazor Web App</a></li>
-					<li>
-						<a href="/blazor/smart-textarea/getting-started">Blazor Server App</a>
-					</li>
 				</ul>
 			</li>
 			<li><a href="/blazor/smart-textarea/customization">Customize Suggestions</a></li>

blazor/accordion/accessibility.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility in Blazor Accordion Component | Syncfusion
-description: Checkout and learn here all about Accessibility in Syncfusion Blazor Accordion component and much more.
+description: Checkout and learn here all about Accessibility in Syncfusion Blazor Accordion component, including WAI-ARIA support, keyboard interaction, and compliance with WCAG, Section 508, and ADA standards.
 platform: Blazor
 control: Accordion
 documentation: ug
@@ -41,18 +41,20 @@ The accessibility compliance for the Blazor Accordion component is outlined belo
 
 ## WAI-ARIA attributes
 
+The Syncfusion Blazor Accordion component automatically applies the following WAI-ARIA attributes to its elements to enhance accessibility:
+
 | Attributes             | Purpose |
 |----------------------|---------------|
-| role                 | **Button:** Attribute is set to the Accordion header elements to indicate that the element can be used to toggle the visibility of the associated content section, describing the actual role of the element.<br> **Region:** Attribute is set to the Accordion panel elements to create a landmark region that contains the currently expanded accordion panel, describing the actual role of the element.  |
-| aria-labelledby      | Attribute is set to content (panel) and it points to the corresponding Accordion header.|
-| aria-controls        | Attribute is set to the header and it points to the corresponding Accordion content.  |
-| aria-expanded        | Attribute is set to the Accordion header elements to indicates the expand state of the Accordion Item. Default value of this attribute is `false`. If an item is expanded, the attribute value changes to ‘true’. |
-| aria-hidden          | Attribute is set to the Accordion panel elements to indicates the content visible state of the Accordion Item. Default value of this attribute is `true`. If an item content is visible, the attribute value changes to `false`. |
+| role                 | **Button:** Applied to the Accordion header elements, indicating they function as interactive buttons that toggle the visibility of their associated content sections. <br> **Region**: Applied to the Accordion panel elements, defining them as landmark regions that contain the currently expanded content, making them discoverable by assistive technologies.        |
+| aria-labelledby      | This attribute is set on the Accordion content (panel) and points to the `id` of its corresponding Accordion header. This establishes a programmatic relationship, allowing screen readers to announce the header as the label for the content.   |
+| aria-controls        | This attribute is set on the Accordion header and points to the `id` of its corresponding Accordion content. This indicates that the header controls the visibility of the specified content panel.  |
+| aria-expanded        | Applied to the Accordion header elements, this attribute communicates the current expansion state of the Accordion item to assistive technologies. It has a default value of `false` (collapsed). When an item expands, its value programmatically changes to `true`. |
+| aria-hidden          | Applied to the Accordion panel elements, this attribute indicates whether the content is visible or hidden. A value of `true` means the content is hidden and not exposed to assistive technologies. Conversely, `false` means the content is visible. The default value is `true` for collapsed content, changing to `false` when the content becomes visible. |
 | aria-disabled        | It indicates the disabled state of the Accordion and its items.  |
 
 ## Keyboard interaction
 
-Keyboard navigation is enabled by default. The possible keys are:
+Keyboard navigation is a fundamental aspect of accessibility and comes enabled by default in the Blazor Accordion. Users can navigate and interact with the Accordion items using the following keys:
 
 | Windows | Mac | Description |
 |---------------|-----------|--------|

blazor/accordion/animations.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Animations in Blazor Accordion Component | Syncfusion
-description: Checkout and learn here all about Animations in Syncfusion Blazor Accordion component and much more.
+description: Customize expand and collapse animations in Syncfusion Blazor Accordion component using various effects, durations, and easing options for enhanced user experience.
 platform: Blazor
 control: Accordion
 documentation: ug
@@ -13,7 +13,7 @@ The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accor
 
 By default, the accordion uses `SlideDown` animation for expanding panels (set through the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Expand) property) and `SlideUp` animation for collapsing panels (set through the [Collapse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Collapse) property). You can disable animations completely by setting the animation [Effect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationCollapse.html#Syncfusion_Blazor_Navigations_AccordionAnimationCollapse_Effect) to `None`.
 
-The following example demonstrates various animation types that can be applied to the Accordion component:
+The following example demonstrates how to apply and select various animation types for both the expand and collapse actions of the Accordion component using interactive dropdowns:
 
 ```cshtml
 @using Syncfusion.Blazor
@@ -73,15 +73,15 @@ The following example demonstrates various animation types that can be applied t
         this.CollapseEffect = args.Value;
     }
     List<Effect> AnimationData = new List<Effect> {
-        new Effect() { ID= AnimationEffect.SlideDown, Text= "SlideDown" },
-        new Effect() { ID= AnimationEffect.SlideUp, Text= "SlideUp" },
-        new Effect() { ID= AnimationEffect.FadeIn, Text= "FadeIn" },
-        new Effect() { ID= AnimationEffect.FadeOut, Text= "FadeOut" },
-        new Effect() { ID= AnimationEffect.FadeZoomIn, Text= "FadeZoomIn" },
-        new Effect() { ID= AnimationEffect.FadeZoomOut, Text= "FadeZoomOut" },
-        new Effect() { ID= AnimationEffect.ZoomIn, Text= "ZoomIn" },
-        new Effect() { ID= AnimationEffect.ZoomOut, Text= "ZoomOut" },
-        new Effect() { ID= AnimationEffect.None, Text= "None" }
+        new Effect() { ID = AnimationEffect.SlideDown, Text = "SlideDown" },
+        new Effect() { ID = AnimationEffect.SlideUp, Text = "SlideUp" },
+        new Effect() { ID = AnimationEffect.FadeIn, Text = "FadeIn" },
+        new Effect() { ID = AnimationEffect.FadeOut, Text = "FadeOut" },
+        new Effect() { ID = AnimationEffect.FadeZoomIn, Text = "FadeZoomIn" },
+        new Effect() { ID = AnimationEffect.FadeZoomOut, Text = "FadeZoomOut" },
+        new Effect() { ID = AnimationEffect.ZoomIn, Text = "ZoomIn" },
+        new Effect() { ID = AnimationEffect.ZoomOut, Text = "ZoomOut" },
+        new Effect() { ID = AnimationEffect.None, Text = "None" }
     };
     public class Effect
     {

blazor/accordion/content-render-mode.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Content Render Mode in Blazor Accordion Component
 
-The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides support for rendering the content of all [AccordionItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html) elements at initial load, which will be maintained in the DOM. To enable this behavior, set the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_LoadOnDemand) property to `false`.
+The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component offers flexibility in how the content of its  [AccordionItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html) elements is rendered into the HTML Document Object Model (DOM). To enable this behavior, set the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_LoadOnDemand) property to `false`.
 
 > The default value of the `LoadOnDemand` property is `true`.
 

blazor/accordion/data-binding.md

@@ -1,15 +1,16 @@
 ---
 layout: post
 title: Data binding in Blazor Accordion Component | Syncfusion
-description: Checkout and learn here all about Data binding in Syncfusion Blazor Accordion component and much more.
+description: Checkout and learn here all about Data binding in Syncfusion Blazor Accordion component and dynamic rendering of headers and content from custom data models.
 platform: Blazor
 control: Accordion
 documentation: ug
 ---
 
 # Data Binding in Blazor Accordion Component
 
-The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides an option to populate accordion items from local data. This can be accomplished by iterating through accordion items using a conditional **foreach** loop. The Accordion component currently supports only local data for data binding. The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_HeaderTemplate) and [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) properties can be used to render the accordion header and content respectively.
+The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides an option to populate accordion items from local data. This allows you to generate `AccordionItem` elements based on a collection of structured data, making your UI components flexible and data-driven. The Accordion component is designed to work with local data collections for its primary data binding.
+You can achieve data binding by iterating through your data collection using a standard Blazor `@foreach` loop. The Accordion component currently supports only local data for data binding. The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_HeaderTemplate) and [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) properties can be used to render the accordion header and content respectively.
 
 The following example demonstrates how to initialize accordion items using `templates`:
 

blazor/accordion/expand-mode.md

@@ -9,14 +9,18 @@ documentation: ug
 
 # Expand Mode in Blazor Accordion Component
 
- The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) supports the two listed types of expand modes while expanding or collapsing the item.
+ The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component offers flexible control over how its items expand and collapse. You can configure the Accordion to allow only one item to be open at a time or to permit multiple items to remain expanded simultaneously. This behavior is managed through the [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_ExpandMode) property.
 
-* Single
-* Multiple
+The Accordion supports two primary types of expand modes:
 
-## Single
+*   **Single**: Only one Accordion item can be expanded at any given time.
+*   **Multiple**: Allows more than one Accordion item to be expanded concurrently.
 
-The property enables to expand only one Accordion item at a time. If you expand any new item, the previously expanded one is collapsed and new item changed to expanded state.
+## Single Expand Mode
+
+The `Single` expand mode ensures that only one `AccordionItem` is expanded at a time. If a new item is expanded, any previously expanded item automatically collapses, maintaining a focused view for the user. This is ideal for scenarios where screen space is limited or when the content of each item requires exclusive attention.
+
+To enable this mode, set the `ExpandMode` property of the `SfAccordion` component to `ExpandMode.Single`.
 
 ```cshtml
 
@@ -39,6 +43,7 @@ The property enables to expand only one Accordion item at a time. If you expand
 ## Multiple
 
 The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_ExpandMode) of the Accordion is `Multiple`. It enables you to expand more than one Accordion item at a time. Expand/collapse action can also be toggled by clicking on it again. For example, expanded item is collapsed when you click on it again.
+To enable this mode, you can either explicitly set `ExpandMode="ExpandMode.Multiple"` (though it's the default) or omit the ExpandMode property entirely.
 
 ```cshtml
 

blazor/accordion/getting-started-with-web-app.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Getting Started with Blazor Accordion in Blazor Web App
 
-This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section provides a concise guide on how to seamlessly integrate the Syncfusion  [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
 
 {% tabcontents %}
 
@@ -243,7 +243,7 @@ The following code explains how to initialize Blazor Accordion using header and
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroNEVLAafNNVqB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
 
 ## See also
 

blazor/accordion/getting-started.md

@@ -172,7 +172,7 @@ The following code explains how to initialize Blazor Accordion using header and
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroNEVLAafNNVqB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
 
 
 ## See also

blazor/accordion/how-to/add-icon-to-accordion-header.md

@@ -1,15 +1,17 @@
 ---
 layout: post
 title: Add Icon to Header in Blazor Accordion Component | Syncfusion
-description: Checkout and learn here all about how to add Icon to Header in Syncfusion Blazor Accordion component and more.
+description: Learn how to enhance your Blazor Accordion component by adding custom icons to headers using the IconCss property and related CSS styling. Includes default behavior comparison and best practices.
 platform: Blazor
 control: Accordion
 documentation: ug
 ---
 
 # Add Icon to Header in Blazor Accordion Component
 
-You can add custom icons to the Accordion header by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_IconCss) property. You can also apply CSS styles to the defined class. The accordion icon element is rendered before the header text in the DOM.
+ By default, header display a simple expand/collapse icon. You can customize the header of each Accordion item by adding your own unique icons. This is achieved using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_IconCss) property of the `AccordionItem`.
+
+When you specify a value for `IconCss`, the custom icon will be rendered in place of the default expand/collapse indicator. The specified CSS class(es) are applied to an element that precedes the header text in the Document Object Model (DOM), providing a straightforward way to integrate custom iconography.
 
 ```cshtml
 @using Syncfusion.Blazor.Navigations

blazor/accordion/how-to/add-nested-accordion.md

@@ -1,23 +1,30 @@
 ---
 layout: post
 title: Add Nested Accordion in Blazor Accordion Component | Syncfusion
-description: Checkout and learn here all about how to add Nested Accordion in Syncfusion Blazor Accordion component and more.
+description: Learn the straightforward method for implementing nested Accordions within the Syncfusion Blazor Accordion component using the ContentTemplate property, with code examples and best practices.
 platform: Blazor
 control: Accordion
 documentation: ug
 ---
 
 # Add Nested Accordion in Blazor Accordion Component
 
-The Accordion component supports to render the nested level of Accordion by using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property. To render the nested Accordion, define the nested Accordion elements within the `ContentTemplate` property of the parent Accordion.
+The Accordion component supports to render the nested level of Accordion by using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property.
+## Implementing Nested Accordions
 
+To achieve nesting, you simply include a complete `<SfAccordion>` component inside the `<ContentTemplate>` of an `AccordionItem` that belongs to a parent `SfAccordion`. Each nested `SfAccordion` functions independently, allowing for distinct content and structure at each level.
+
+### Example: Multiple Levels of Nesting
+
+This example demonstrates how to create a two-level nested Accordion structure.
 ```cshtml
 @using Syncfusion.Blazor.Navigations
 
 <SfAccordion>
     <AccordionItems>
         <AccordionItem Header="Video">
             <ContentTemplate>
+                <!-- First level nested Accordion -->
                 <SfAccordion>
                     <AccordionItems>
                         <AccordionItem Header="Video Track1"></AccordionItem>
@@ -28,12 +35,14 @@ The Accordion component supports to render the nested level of Accordion by usin
         </AccordionItem>
         <AccordionItem Header="Music">
             <ContentTemplate>
+                <!-- First level nested Accordion -->
                 <SfAccordion>
                     <AccordionItems>
                         <AccordionItem Header="Music Track1"></AccordionItem>
                         <AccordionItem Header="Music Track2"></AccordionItem>
                         <AccordionItem Header="Music New">
                             <ContentTemplate>
+                                 <!-- Second level nested Accordion -->
                                 <SfAccordion>
                                     <AccordionItems>
                                         <AccordionItem Header="New Track1"></AccordionItem>
@@ -48,6 +57,7 @@ The Accordion component supports to render the nested level of Accordion by usin
         </AccordionItem>
         <AccordionItem Header="Images">
             <ContentTemplate>
+                <!-- First level nested Accordion -->
                 <SfAccordion>
                     <AccordionItems>
                         <AccordionItem Header="Track1"></AccordionItem>