page with tab separated content - Using Umbraco 7

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

DonZalmrol 220 posts 833 karma points

Oct 27, 2015 @ 11:09

0

page with tab separated content

Hi all,

So I'm creating a page that has tabbed contents. The contents are pages again that have a publishing date.

Each tab has a label (i.e. 2015, 2014, ... 2010 and Archive) and I want to be able to auto create date tabs as well (i.e. 2016 and up) and put the older contents under the tab archive (i.e. older than 5 years).

The tabs itself contains the content pages from that year.

In short the end user can create content and it's auto tabbed under the correct year or archive.

This the test page screenshot that I've build

Thank you in advance!

Laurens

Copy Link

DonZalmrol 220 posts 833 karma points

Oct 28, 2015 @ 09:52

Okay, I'm making progress. There are still some minor issues on this topic.

So as you can see the tab shows everything of the year 2015 enter image description here

If you then go to the year 2013 it only shows 1 item while there should be 2 items and even more so, no bodytext description like on the first tab...

enter image description here

Then if you back to the year 2015, it's only showing 1 item instead of the 4 items you saw earlier...

enter image description here

It seems that the issue is coming from the foreach loop I have. It's not appending the items to the div, but creating new divs each time.

    @foreach(var item in selection)
{
    @*var item = Umbraco.Content(id);*@

    if(item.Name.Contains("2016"))
    {
        <div id="tab-0" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else if(item.Name.Contains("2015"))
    {
        <div id="tab-1" class="tab-content current">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>

            <p></p>
        </div>
    }

    else if(item.Name.Contains("2014"))
    {
        <div id="tab-2" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else if(item.Name.Contains("2013"))
    {
        <div id="tab-3" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else if(item.Name.Contains("2012"))
    {
        <div id="tab-4" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else if(item.Name.Contains("2011"))
    {
        <div id="tab-5" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else if(item.Name.Contains("2010"))
    {
        <div id="tab-6" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }

    else
    {
        <div id="tab-7" class="tab-content">
            <p>@item.Name <a href="@item.Url">@item.bodyText</a></p>
        </div>
    }
}

Copy Link

DonZalmrol 220 posts 833 karma points

Mar 06, 2016 @ 14:21

100

A little bump since much time has passed. Anybody out there that has been successful in creating a tabbed content page with year separation? :)

Update: Problem solved using some "dirty" tricks

http://stackoverflow.com/questions/36031422/show-tags-under-their-own-specific-tab

Copy Link
is working on a reply...

Please Sign in or register to post replies