Creating tabbed content, best way?

[fpl9250]

Hello,

I'm trying to create a page that has 3 or more sections of content, but instead of having a long page, I wanted to create tabs where the clicked tab will be of a different color and its content will show. Kind of like the properties palettes in windows, that they have a bunch of tabs and you click on the one that you are looking for, then that one will become active and its content will "come to the front".

Has anyone seen this on a webpage? I don't want to make this labor intensive to update, and I want to use CSS as much as possible. Has anyone seen any tutorials on this, or something that I can reverse engineer?

Thanks in advance

 

[jstreich]

The only ways I've see this done is with JavaScript. One way uses Ajax to change the content and the other just changes classes on divs making different CSS rules apply. the WYSIWYG editor called tinymce uses the later method in it's pop-ups to edit links and pictures.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[vacunita]

There are many ways to accomplish this. Preferably using a server-side lanuage. However in the absence of that, Javascript and CSS woulds be the simplest way. Its just a matter of setting the display attribute for the different tabs to hidden, until clicked on. You then would use JS to change that attribute to visible.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[jcostanzo]

To kind of help you a little more you would basically throw a showIt hideIT function.

function hideIt(object) 
{
object.style.visibility="hidden";
}

function showIt(object) 
{
object.style.visibility="visible";
}

There would be a start or a snippet of some coding

 

[jstreich]

I was thinking something like (not tested).

CSS:

a.tab
{
  display: block;
  float: left;
  background: grey;
  margin-bottom: 0;
  border: 1px solid black;
  z-index: 5;
}

a.activetab
{
  display: block;
  float: left;
  background: white;
  margin-bottom: 0;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  z-index: 5;
}

.panel
{
  background: white;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  position: relative;
  top: 1px;
  z-index: 3;
  display: none;
}

.activepanel
{
  background: white;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  position: relative;
  top: 1px;
  z-index: 3;
}

JavaScript:

function hide(object)
{
  object.className="panel"
}

function show(object)
{
  object.className="activepanel";
}

function activate(object)
{
  object.className="activetab";
}

function inactiveate(object);
{
  object.className="tab";
}

HTML:

<a href="#" id="tab1" class="activetab" onclick="hide(getElementById(panel2));inactivate(getElementById(tab2));show(getElementById(panel1));activate( this);">Tab 1</a>
<a href="#" id="tab2" class="tab" onclick="hide(getElementById(panel1));inactivate(getElementById(tab1));show(getElementById(panel2));activate( this);">Tab 2</a>
<div class="activepanel" id="panel1">
some content goes here.
</div>
<div class="panel" id="panel2">
some other content goes here.
</div>

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[grtammi]

Check out this article on A List Apart:

http://www.alistapart.com/articles/eatcake/

I think it does exactly what you are looking to do.

Greg

 

[j4606]

seems like a lot of code. I had to implement tabs here is the script that runs mine

		function showHideTabs(obj){
			if(obj.id == "portab"){
				document.getElementById("settab").className = "tab_closed";
				document.getElementById("portab").className = "tab_opened";
				document.getElementById("mainSettingsContainer").style.display = "none";
				document.getElementById("mainPortletContainer").style.display = "block";
			}
			if(obj.id == "settab"){
				document.getElementById("settab").className = "tab_opened";
				document.getElementById("portab").className = "tab_closed";
				document.getElementById("mainSettingsContainer").style.display = "block";
				document.getElementById("mainPortletContainer").style.display = "none";
				this.className = "tab_opened";
			}
		}

Its sort of self explanatory, just add your own classes.

 

[jstreich]

I like A List Apart, and esp. the article on Tabs qrtammi posted. There code is very easy to add more tabs to. I still don't like that it's all JavaScript -- but I think CSS 3 will have support for Tabs, so we'll see what happens.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[j4606]

The list apart article is somehwat old(2004) and it uses
getElementsByTagName to get both divs and a links. Then loops through both these objects to display the divs and assigns values to the anchors. This method is ok, but is complicated and I don't see why you need to loop through EVERY div and anchor your page. Aside from that it uses alot of temp vars and conditions, IMO you would be better off writing your own, passing in ids.

 

[jstreich]

The reason is because ids have to be unique within a page. The page would get a lot larger as far as JS goes, using your or my method, if there were 10 to 12 tabs. Theres uses more client CPU time on click, but the download is smaller.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[j4606]

Well, I'm not gonna argue about how to best set up tabs. I'm sure there are thousands of ways to set it up. Like i said thier method is ok and you can use it but my advice would be to roll your own, this doesn;t mean you can't use thiers as an example. Sure passing in ids would be a less than ideal solution for 20 or so tabs but then you could set up an array of ids to loop through. Or better yet just get all divs within a container and not the entire page. I see alot of things I could tweak with the "a list apart" code. Just keep in mind that even though it may not make a differnce to you, there are hundreds of sites out there that are created by people using cut and paste examples. Eventually if you keep doing this your page will turn into something bulky and slow.

 

[jstreich]

I wasn't saying the A List Apart is always perfect, or that cut and paste code is good. It isn't cut and paste code, it's an article on preserving useability and accessibility while still using some neat features for modern browsers that degrade nicely in text-only, limited or accessibility minded user agents like Lynx and screen readers. The code was just one example of such.

The advantage of there code, as I said, is less bandwidth with more tabs. I didn't mean that it wouldn't need to be tweaked, it is an example of an approach not a copy and paste example.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]