ASP.net - open and close a list on button click - asp.net

Question

I am pretty advanced in C# but a newcomer in the world of ASP.NET.
My HomeController.cs:
public ActionResult Index()
{
// tuple -> item1 = key string / item2 = assigned list
var configList = new List<Tuple<string, List<string>>>();
configList = fillItWithSomeData(..)
ViewBag.ConfigSettings = configList;
return View();
}
My Index.cshtml:
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>
</div>
Every key string in my list contains a list of strings. (look at var configList)
In my view I want to have a button for each key string which should be able to open or close the assigned list of the respective key string. I currently use ASP.NET-MVC. How can I program that? In C# or do I need to use JS for that? I really have no idea. Thanks in advance.

Answer 1

You can use bootstrap Accordion or bootstrap Collapsible panel.
below code using bootstrap Collapsible panel.
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox" data-toggle="collapse" data-target="##elements.Item1">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox collapse" id="#elements.Item1">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>