Unordered list by ContentArea

Fast example how to make ContentArea rendered as unordered list from blocks in EpiServer 7 MVC.

Starting markup:

<ul class="js-expandable">
    <li class="foo">Expand me
        <a class="expander">Open</a>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur</p>

That is very easy to achieve using CustomTag, CssClass, ChildrenCustomTagName, ChildrenCssClass:

@Html.PropertyFor(m => m.MyBlockContentArea, new
    CustomTag = "ul",
    CssClass = "js-expandable",
    ChildrenCustomTagName ="li",

Block markup:

@using EPiServer.Web.Mvc.Html

@model MyBlock

@Html.PropertyFor(m => m.Heading)
<a class="expander">Open</a>
<div class="panel">
    <p>@Html.PropertyFor(m => m.MainIntro)</p>

Like you can guess, resulting markup is the same.