Accordion
Accordion
AccordionPane Collasped
The AccordionPane.IsCollapsed property allows you to set a pane as collapsed or not.
Features
Sample
Description
This sample demonstrates the usage of IsCollapsed property of Pane for the Accordion control.
The first Pane is configured to have the IsCollapsed property as true meanwhile the second is set to false so it is an expanded pane.
Source
AccordionPaneCollapsedController.cs
using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class AccordionController : Controller { public ActionResult AccordionPaneCollapsed() { return View(); } } }
AccordionPaneCollapsed.cshtml
<div> <div> <a id="headerCollapsedPane">CollapsedPane - true</a> <div id="contentCollapsedPane"> <!-- content --> <div class="wj-labeled-input switch"> <input id="isCollapsed_0" type="checkbox" disabled/> <label for="isCollapsed_0"> IsCollapsed Pane <span>@Html.Raw(AccordionRes.AccordionPane_Text3)</span> </label> </div> </div> </div> <div> <a id="headerNonCollapsedPane">CollapsedPane - false</a> <div id="contentNonCollapsedPane"> <!-- content --> <div class="wj-labeled-input switch"> <input id="isCollapsed_1" type="checkbox" disabled/> <label for="isCollapsed_1"> IsCollapsed Pane <span>@Html.Raw(AccordionRes.AccordionPane_Text3)</span> </label> </div> </div> </div> </div> <c1-accordion id="mvcAccordion" selected-index-changed="SetCheckboxValue"> <c1-accordion-pane header="#headerCollapsedPane" content="#contentCollapsedPane" is-collapsed="true"></c1-accordion-pane> <c1-accordion-pane header="#headerNonCollapsedPane" content="#contentNonCollapsedPane" is-collapsed="false"></c1-accordion-pane> </c1-accordion> @section Styles{ <style type="text/css"> /* Accordion: */ /* customize the labeled inputs */ .wj-labeled-input { width: 30%; } .wj-labeled-input > label > span { display: block; font-weight: normal; font-size: 90%; opacity: .90; color: black; } </style> } @section Scripts{ <script> function SetCheckboxValue(e) { let acc = wijmo.Control.getControl("#mvcAccordion"); let cb = document.getElementById("isCollapsed_"+e.selectedIndex); cb.checked = acc.panes[e.selectedIndex].isCollapsed; document.getElementById("headerCollapsedPane").innerText = "CollapsedPane - " + (e.selectedIndex==0 ? cb.checked : !cb.checked); document.getElementById("headerNonCollapsedPane").innerText = "CollapsedPane - " + (e.selectedIndex == 1 ? cb.checked : !cb.checked); } </script> } @section Summary{ <p>@Html.Raw(AccordionRes.AccordionPane_Text0)</p> } @section Description{ <p>@Html.Raw(AccordionRes.AccordionPane_Text1)</p> <p>@Html.Raw(AccordionRes.AccordionPane_Text2)</p> }
Documentation