Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Accordion

Accordion

Documentation

The Accordion UI component contains several panels displayed one under another. These panels can be collapsed or expanded by a user, which makes this UI component very useful for presenting information in a limited amount of space.

<div id="accordion"> @(Html.DevExtreme().Accordion() .ID("accordion-container") .DataSource(d => d.Mvc().LoadAction("GetData").Key("ID")) .AnimationDuration(300) .Collapsible(false) .Multiple(false) .OnSelectionChanged("accordion_selectionChanged") .ItemTitleTemplate(@<text><h1><%- Name %></h1></text>) .ItemTemplate(@<text> <div class="accodion-item"> <div> <p> <b><%- City %></b> (<span><%- State %></span>) </p> <p> <span><%- ZipCode %></span> <span><%- Address %></span> </p> </div> <div> <p>Phone: <b><%- Phone %></b></p> <p>Fax: <b><%- Fax %></b></p> <p>Website: <a href="<%- Website %>" target="_blank"><%- Website %></a></p> </div> </div> </text>) ) <div class="selected-data"> <span class="caption">Selected Items</span> @(Html.DevExtreme().TagBox() .ID("tagbox") .DisplayExpr("Name") .ValueExpr("ID") .Value(new[] { 1 }) .DataSource(d => d.Mvc().LoadAction("GetData").Key("ID")) .Disabled(true) .OnValueChanged("tagBox_valueChanged") ) </div> <div class="options"> <div class="caption">Options</div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Multiple enabled") .OnValueChanged("multipleMode_changed") ) </div> <div class="option"> @(Html.DevExtreme().CheckBox() .Text("Collapsible enabled") .OnValueChanged("collapsibleMode_changed") ) </div> <div class="option"> <span>Animation duration</span> @(Html.DevExtreme().Slider() .Min(0) .Max(1000) .Value(300) .Label(l => l.Visible(true)) .Tooltip(t => t .Enabled(true) .Position(VerticalEdge.Bottom) ) .OnValueChanged("slider_valueChanged") ) </div> </div> </div> <script> function getAccordionInstance() { return $("#accordion-container").dxAccordion("instance"); } function getTagBoxInstance() { return $("#tagbox").dxTagBox("instance"); } function tagBox_valueChanged(e) { getAccordionInstance().option("selectedItemKeys", e.value); } function accordion_selectionChanged(e) { getTagBoxInstance().option("value", e.component.option("selectedItemKeys")); } function slider_valueChanged(e) { getAccordionInstance().option("animationDuration", e.value); } function multipleMode_changed(e) { var tagBox = getTagBoxInstance(), accordion = getAccordionInstance(); accordion.option("multiple", e.value); tagBox.option("disabled", !e.value); tagBox.option("value", accordion.option("selectedItemKeys")); } function collapsibleMode_changed(e) { getAccordionInstance().option("collapsible", e.value); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class AccordionController : Controller { public ActionResult Overview() { return View(); } [HttpGet] public ActionResult GetData(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Companies, loadOptions)), "application/json"); } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Company> Companies = new[] { new Company { ID = 1, Name = "Super Mart of the West", Address = "702 SW 8th Street", City = "Bentonville", State = "Arkansas", ZipCode = 72716, Phone = "(800) 555-2797", Fax = "(800) 555-2171", Website = "http://www.nowebsitesupermart.com" }, new Company { ID = 2, Name = "Electronics Depot", Address = "2455 Paces Ferry Road NW", City = "Atlanta", State = "Georgia", ZipCode = 30339, Phone = "(800) 595-3232", Fax = "(800) 595-3231", Website = "http://www.nowebsitedepot.com" }, new Company { ID = 3, Name = "K&S Music", Address = "1000 Nicllet Mall", City = "Minneapolis", State = "Minnesota", ZipCode = 55403, Phone = "(612) 304-6073", Fax = "(612) 304-6074", Website = "http://www.nowebsitemusic.com" }, new Company { ID = 4, Name = "Tom's Club", Address = "999 Lake Drive", City = "Issaquah", State = "Washington", ZipCode = 98027, Phone = "(800) 955-2292", Fax = "(800) 955-2293", Website = "http://www.nowebsitetomsclub.com" } }; } }
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class Company { public int ID { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public int ZipCode { get; set; } public string Phone { get; set; } public string Fax { get; set; } public string Website { get; set; } } }
#accordion h1 { font-size: 20px; } #accordion h1, #accordion p { margin: 0; } .dx-theme-material #accordion .dx-accordion-item-opened .dx-accordion-item-title { display: flex; } .dx-theme-material #accordion .dx-accordion-item-opened h1 { align-self: center; } .options, .selected-data { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .selected-data { position: relative; height: 36px; } .selected-data > .caption { position: relative; top: 5px; margin-right: 10px; font-weight: bold; font-size: 115%; } .selected-data > .dx-widget { position: absolute; left: 140px; right: 20px; top: 20px; } .options > .caption { font-weight: 500; font-size: 18px; } .option { margin-top: 10px; }