Need to display multiple renderings in a Tab view

Question

I am using Sitecore 9 and I need to display 5 controller renderings in a Tabbed view.

I looked at the article: How to show three different Tabs rendering by using Sitecore in ASP.NET MVC

But could not create the desired result. Can you please share more detailed steps or a sample with two renderings/items displayed as two tabs.

Thanks Om

Answer 1

The easiest way to do it with dynamic placeholders. For example, your need following markup:

<div class="tabs">
    <div class="tab">Controller Rendering 1 Content</div>
    <div class="tab">Controller Rendering 2 Content</div>
    <div class="tab">Controller Rendering 3 Content</div>
    <div class="tab">Controller Rendering 4 Content</div>
    <div class="tab">Controller Rendering 5 Content</div>
</div>

You need to have one rendering that is your tabs wrapper (container):

<div class="tabs">
    @Html.Sitecore().DynamicPlaceholder(new DynamicPlaceholderDefinition("tab-item")
    {
        OutputModifier = (input, context) => new HtmlString("<div class="tab">" + input + "</div>")
    })
</div>

And you need your 5 controller renderings, that are assigned to "tab-item" placeholder. Open experience editor and insert your renderings in container in needed sequence.

Try to use html markup where tab menu links are inside tabs content. Something like this https://kyusuf.com/post/completely-css-tabs