Want to show 3 tab in a page from viewer side every tab will be linked with block

Vote:
 

 I want to show 3 tab in a page from viewer side.  Every tab will be linked with  a block. Is this possible ? Any one Please help me to do so. Its very urgent. I will appreaciate your help in advance

#151474
Jul 24, 2016 10:18
Vote:
 

Hi Sourav,

Yes, this is possible. You can have two approaches:

1. Have a Content Area on the page restricted to a specific block type that you want to show as tab later on, ex:

[AllowedTypes(AllowedTypes = new [] { typeof(MyBlock) })]
public virtual ContentArea Tabs { get; set; }

2. Have three properties of type block, ex:

public virtual MyBlock Block1 { get; set; }
public virtual MyBlock Block2 { get; set; }
public virtual MyBlock Block3 { get; set; }

In any case, your MyBlock type would be defined similarily, but the first approach gives you an opportunity to have, ex. four tabs later on and a bit easier rendering. Even if you decide to restrict the number of tabs, I'd still suggest going with the first solution.

Then the rendering is easy, go through this blog post: http://joelabrahamsson.com/episerver-7-and-mvc-custom-tags-and-css-classes-when-rendering-properties/

For the tab behavior itself, you could use Bootstrap tabs, ex: http://getbootstrap.com/javascript/#tabs

BR,

Marija

#151483
Edited, Jul 25, 2016 11:24
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.