Trying to add tabs to the profile page...

[fennecfyre]

Site: racingthetide.boards.net/

To save space, I'd like to set it so that the bigger main fields of a character profile on my board (appearance, history, personality, etc) are enclosed in tabs, but I'm not quite sure how to do it. You can see what I have so far below, found a code that gives me the right sort of layout I was looking for, but the tabs don't actually do anything or react to being clicked. I found one tutorial but it requires JQuery, which doesn't seem to play nice with Proboards. Are there any other ways to go about this?



This is the tab code, at the moment it doesn't have any added css specific for it:
<div class="profilecontainer" style="margin-top:20px;font-size:10pt;width:700px;text-align:left;">

<ul class="tab-links">

<li class="active"><a href="#tab1">Tab #1</a></li>

<li><a href="#tab2">Tab #2</a></li>

<li><a href="#tab3">Tab #3</a></li>

<li><a href="#tab4">Tab #4</a></li>

</ul>



<div class="tab-content">

<div id="tab1" class="tab active">

<p>Tab #1 content goes here!</p>

<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>

</div>



<div id="tab2" class="tab">

<p>Tab #2 content goes here!</p>

<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>

</div>



<div id="tab3" class="tab">

<p>Tab #3 content goes here!</p>

<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>

</div>



<div id="tab4" class="tab">

<p>Tab #4 content goes here!</p>

<p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>

</div>

</div>

</div>

[Nori]

Have you looked at the Tabbed Table in Posts plugin? You can fully style it with your forum's CSS so it adapts to every theme you have (if you have more than one).


Otherwise... Tabs require a script for onclick functions unless you go into something like using a trail of quirky CSS to accomplish it. The plugin is by far your easiest bet for in-posts.

[fennecfyre]

Will that work in profiles, as part of the layout? If it does I'll most definitely use it. Nori

[Nori]

Er sorry, I read 'character profile' and thought this was for posts/threads. Not Member profile.


I don't know javascript/jquery at all and have only ever used W3Schools for this thing. But the plugin won't work for layout templates. You have to use scripts.

[fennecfyre]

That's okay. I use that site often myself when I'm trying to figure out how to do a particular thing, but when you say scripts, do you mean javascripts, or is there a non-java way to get this functionality?

[Nori]

Javascript/jquery, etc. There is kind of a way to use straight CSS for a tab function but once you start trying to use CSS for something it's not explicitly intended for it starts getting quirky and can end up being more of a headache than just learning javascript.

Sadly I can't help you much further as I have no experience with them, sorry ^^;


*Edit: Oh actually fennecfyre, there's this older thread that could be of use to you maybe?

[fennecfyre]

Bawwww Dx Well, no big deal, I can live without it. Thanks anyway!