Re: [CSS3] Collapsing elements proposal [wasRe: Collapsing elements]

On Feb 23, 2008, at 12:15 AM, Brad Kemper wrote:

>> --------------------------
>> My proposal is to add  :collapsed and :expanded state flags for  
>> the DOM
>> elements (and correspondent pseudo-classes in CSS)
>>
>> Here are couple of examples of real life cases where these states  
>> are needed:
>> 1) Collapsible/expandable lists.
>> 2) Tab views (a.k.a. stack views). Set of panels where all panels  
>> are in collapsed
>> state except of one - current panel.
>
> This is another example where 'checked" really makes sense, as both  
> an HTML attribute, and as something that changes when you click on  
> it, just like a radio button. In Mac OS X, tabs as an interface  
> element are just a subclass of radio buttons. We think nothing of  
> saying that a radio button is "checked", but they got their name  
> from the old car radios in which only one button could be pushed in  
> at a time. There was no check mark involved, just an indication of  
> which one had the activated state. That is really the same thing  
> with tabs; only one can be the activated one at a time, and it is  
> not indicated by an actual check mark.
>

If only an input element could have descendants, then you could  
create tabs like this:

--------- HTML: ------------

<input type="radio" class="tab" checked>
	<label>Tab 1</label>
	<span>
		Contents to show when input is checked
	</span>
</input>
<input type="radio" class="tab">
	<label>Tab 2</label>
	<span>
		Contents to show when input is checked
	</span>
</input>

--------- CSS: ------------

input.tab label {
	appearance: tab;
	/* or style it yourself */
}
input.tab:checked label {
	appearance: tab-front;
	/* or style it yourself */
	/* for the tab that is "in front" */
}

input.tab label > span  {
	display: none
}

input.tab:checked label > span  {
	display:block;
	appearance: tab-body
	/* or style it yourself */
	/* for the content box that is revealed*/
	/* when the tab is in front */
}


~~~~~~~~~~~~~~~~~~
or a new <input type="tab"> that was block level and had a closing  
tag could work similarly, but allow any level of contents within it  
(not just inline stuff)
~~~~~~~~~~~~~~~~~~
or... (if labels inherited "checked" from input)
~~~~~~~~~~~~~~~~~~

--------- HTML: ------------

<label class="tab" for="tab1">
	<span class="tab"><input type="radio" name="tab"  id="tab1"  checked />
		Tab 1
	</span>
	<span class="tab_body">
		Contents to show when input is checked
	</span>
</label>
	
<label class="tab" for="tab2">
	<span class="tab"><input type="radio" name="tab" id="tab2" />
		Tab 2
	</span>
	<span class="tab_body">
		Contents to show when input is checked
	</span>
</label>

--------- CSS: ------------

label.tab { display: block; }
label.tab input { display: none; }

label.tab span.tab {
	display: inline-block;
	appearance: tab;
	/* or style it yourself */
}
label.tab:checked span.tab {
	appearance: tab-front
	/* or style it yourself */
	/* for the tab that is "in front" */
}

label.tab > SPAN.tab_body  {
	display: none
}

label.tab:checked > SPAN.tab_body  {
	display:block;
	appearance: tab-body
	/* or style it yourself */
	/* for the content box that is revealed*/
	/* when the tab is in front */
}

~~~~~~~~~~~~~~~~~~
Of course it would be more convenient if you could put DIVs and P's  
and such inside, but input and label are both inline....

On the other hand, if we could somehow assign checkbox-like and radio  
button-like behavior to any element, then all this would be even  
easier. But being able to have a ":checked" pseudo-class on labels  
that reflected the "checked" state of the input would be huge, and  
could be accomplished entirely within CSS.

In all of the above, the two tabs would be this part:


          | tab 1 | | tab 2 |

And the tab body would be this part:


|                                    |
|                                    |
|                                    |
|                                    |

And would probably have a z-index to put it under the tabs, with a  
little negative top margin.