Hey Umbracians,

I'm new to Umbraco, but have a been programming ASP.NET MVC for some time now. I also want to thank those people who doing a great work with making umbraco.

I got this problem that have bothering me for some days now. I'm coding a site with umbraco 7.0.4 in VS.

The trouble I'm having is, how that I haven't be able to find a solution yet on how to make dynamic tabs with additional content in. And I have both search here on the forum and on google.

I need to make a subpage with some content, and in the bottom of I need a Tabs with more content in them.

Example:

tab 1: Description

tab 2: Before/after pictures

tab 3: brochures

and so on...

I have made these tabs and generics properties, in the Document Type: Subpage

Tab: Content - with these generic properties:

property: Title

property: Content

Tab: Additional - with these generic properties:

property: Description

property: BeforeAfterPictures

property: Brochure

I have implemented a Macropartials in my Subpage: SubpageNavItem

@{

    Node current = Node.GetCurrent();
    DocumentType dt = DocumentType.GetByAlias(current.NodeTypeAlias);


}


<div class="additionalMenuNavigation">
    @if (dt != null)
    {
        <ul class="nav nav-justified">
            @foreach (var tab in dt.getVirtualTabs)
            {

                if (tab.Id == 1013)
                {

                    foreach (var propertyType in tab.PropertyTypes)
                    {
                        string name = propertyType.Name;
                        <li>
                            <a href="#" id="@propertyType.Name" onclick="ShowAdditional(this)" class="additionalMenuNavigation-a"  >
                                <div class="additionalMenuDivider">
                                    @name
                                </div>
                            </a>
                        </li>
                    }
                }
            }
        </ul>
    }
</div>
<script>
    function ShowAdditional(btnClicked) {

        var id = $(btnClicked).attr('id');

        $.ajax({
            url: "/base/Relations/ShowAdditional/"+id,
            type: "GET",

        })
            .done(function (partialVeiwResult) {
                $("#string").html(partialVeiwResult);
            });
    }
    </script>

And the Subpage:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Layout.cshtml";
}
<div class="row">
    @Html.Partial("~/Views/Partials/breadcrumb.cshtml")
</div>
<div class="container">
    <div class="row-fluid">
        <div class="col-lg-3" style="height:100%;">
            @Html.Partial("~/Views/Partials/ContentVerticalList.cshtml")
        </div>
        <div class="col-lg-9">
            <h3>@Umbraco.Field("title")</h3>
        </div>
        <div class="col-lg-6">
            @Umbraco.Field("content")
        </div>
        <div class="col-lg-3">
            <div class="testimonial">
                <h3>"</h3>@Umbraco.Field("testimonial")
            </div>

        </div>
        <div class="col-lg-9">
            @Umbraco.RenderMacro("SubpageNavItem")
        </div>
        <div class="col-lg-9">
            <div id="string"></div>
@*            <div id="usual1" class="usual">*@
@*                <ul>*@
@*                    <li><a class="selected" href="#tab1">Tab 1</a></li>*@
@*                    <li><a href="#tab2">Tab 2</a></li>*@
@*                    <li><a href="#tab3">Tab 3</a></li>*@
@*                </ul>*@
@*                <div id="tab1">This is tab 1.</div>*@
@*                <div id="tab2">More content in tab 2.</div>*@
@*                <div id="tab3">Tab 3 is always last!</div>*@
@*            </div>*@
@**@
@*            <script type="text/javascript">*@
@*                $("#usual1 ul").idTabs();*@
@*            </script>*@

        </div>
    </div>
</div>

What i need is for the Tabs to show the additional information to the user, without the hole page reloading for each click on a tab. I also want to avoid making children document types, to make the backoffice page more userfriendly and I have a contentVerticalList(Menu) which shows all children pages of the site.

I'm not sure if the best solution would be to do some Tabs with JQuery, ajax or if there is a plugin that would work for what I want to achive.

Something like this http://www.sunsean.com/idTabs/#usual

I hope someone with more experince and knowledge in umbraco can guide me in the right direction.

Best Regards

Benjamin