Accordion
Accordion
Overview
The Accordion control allows you to organize content into collapsible panes.
Features
Sample
Accordion
Change the properties of this Accordion.
Connection
Wi-Fi, Mobile, Data usage, and Hotspot
Connected Devices
Bluetooth, NFC
Apps & Notifications
Recent apps, Default apps, Block, Allow
Battery
39% - Should last until about 7:35 PM
Description
The Accordion control allows you to organize content into collapsible panes.
Source
IndexController.cs
using MvcExplorer.Models; using System.Web.Mvc; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class AccordionController : Controller { // GET: Index public ActionResult Index(FormCollection collection) { return View(); } } }
Index.cshtml
@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> c1.documentReady(function () { let acc = wijmo.Control.getControl("#mvcAccordion"); link(acc, 'showIcons'); link(acc, 'autoSwitch'); link(acc, 'isAnimated'); link(acc, 'allowCollapseAll'); link(acc, 'allowExpandMany'); }); function link(acc, id) { let cb = document.getElementById(id); acc[id] = cb.checked; cb.addEventListener('click', function(e) { acc[id] = cb.checked; }); } </script> } <div class="container-fluid"> <div id="mvcAccordion"> <div> <!-- pane --> <div class="main-pane"> <!-- header --> Accordion <div class="desc"> Change the properties of this Accordion. </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="showIcons" type="checkbox" checked /> <label for="showIcons"> ShowIcons <span>Show icon in the pane headers</span> </label> </div> <div class="wj-labeled-input switch"> <input id="autoSwitch" type="checkbox" checked /> <label for="autoSwitch"> AutoSwitch <span>Expand panes when selecting with the keyboard</span> </label> </div> <div class="wj-labeled-input switch"> <input id="isAnimated" type="checkbox" checked /> <label for="isAnimated"> IsAnimated <span>Animate pane collapse/expand</span> </label> </div> <div class="wj-labeled-input switch"> <input id="allowCollapseAll" type="checkbox" /> <label for="allowCollapseAll"> AllowCollapseAll <span>Can collapse all panes</span> </label> </div> <div class="wj-labeled-input switch"> <input id="allowExpandMany" type="checkbox" /> <label for="allowExpandMany"> AllowExpandMany <span>Can expand multiple panes</span> </label> </div> </div> </div> <div> <!-- pane --> <div> <!-- header --> Connection <div class="desc"> Wi-Fi, Mobile, Data usage, and Hotspot </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="wifi" type="checkbox" checked /> <label for="wifi"> Wi-Fi <span>Turn Wi-fi on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="mobiledata" type="checkbox" /> <label for="mobiledata"> Mobile Data <span>Turn Mobile data on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bluetooth" type="checkbox" checked /> <label for="bluetooth"> Bluetooth <span>Turn Bluetooth on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="apmode" type="checkbox" /> <label for="apmode"> Airplane Mode <span>Turn Airplane mode on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="hotspot" type="checkbox" /> <label for="hotspot"> Hot Spot & Tethering <span>Hotspot on, Tethering</span> </label> </div> </div> </div> <div> <!-- pane --> <div> <!-- header --> Connected Devices <div class="desc"> Bluetooth, NFC </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="dev1" type="checkbox" checked /> <label for="dev1"> Gear Fit2 Pro <span>Health monitor</span> </label> </div> <div class="wj-labeled-input switch"> <input id="dev2" type="checkbox" /> <label for="dev2"> SYNC <span>Car connection</span> </label> </div> <div class="wj-labeled-input switch"> <input id="dev3" type="checkbox" /> <label for="dev3"> Samsung XT-9343 <span>TV</span> </label> </div> <button class="btn btn-primary"> See More... </button> </div> </div> <div> <!-- pane --> <div> <!-- header --> Apps & Notifications <div class="desc"> Recent apps, Default apps, Block, Allow </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="app-chrome" type="checkbox" /> <label for="app-chrome"> Chrome <span>Web browser</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-outlook" type="checkbox" /> <label for="app-outlook"> Outlook <span>Mail and schedule</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-fb" type="checkbox" checked /> <label for="app-fb"> Facebook <span>Social media</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-twitter" type="checkbox" /> <label for="app-twitter"> Twitter <span>Social media</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-teams" type="checkbox" checked /> <label for="app-teams"> Teams <span>Chat, Meetings, Calling, Collaboration</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-skype" type="checkbox" /> <label for="app-skype"> Skype <span>Chat, Meetings, Calling, Collaboration</span> </label> </div> <button class="btn btn-primary"> See More... </button> </div> </div> <div> <!-- pane --> <div> <!-- header --> Battery <div class="desc"> <span style="color:orangered">39%</span> - Should last until about 7:35 PM </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="bat-sav" type="checkbox" checked /> <label for="bat-sav"> Battery Saver <span>Slow down to reduce battery usage</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bat-adapt" type="checkbox" /> <label for="bat-adapt"> Adaptive Battery <span>Detect when apps drain battery</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bat-pct" type="checkbox" /> <label for="bat-pct"> Battery Percentage <span>Show battery percentage</span> </label> </div> </div> </div> </div> </div> @Html.C1().Accordion("#mvcAccordion") @section Summary{ <p>@Html.Raw(Resources.Accordion.Index_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.Accordion.Index_Text0)</p> }
Documentation