In the following example, the height is not constrained, so the page jumps around when a new tab is selected. "Tab 2" contains a nested tabber.
Tab 1 content.
Tab 2 content. A nested tabber:
Tab 2-1 content.
Tab 2-2 content.
Tab 2-3 content.
Tab 3 content.
In the following example, "Tab 2" should be selected automatically. In addition, there is an onclick function attached to the tabs so you can confirm each click.
Tab 1 content.
Long content to show the scrollbar to the right.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nonummy lorem quis neque. Etiam molestie auctor ante. Fusce in enim. Suspendisse at ipsum. Praesent eget odio vitae lorem consectetuer euismod. Mauris vel risus eget arcu congue sodales. Mauris adipiscing viverra ante. Cras pharetra augue sit amet enim. Pellentesque ac sem. Nullam pulvinar convallis orci. In tristique accumsan enim. Nam venenatis suscipit lorem. Nam ut dui sit amet libero egestas facilisis. Aliquam elementum lectus sed ipsum tincidunt aliquet. Pellentesque nec nunc at metus malesuada hendrerit. Suspendisse magna. Aliquam odio augue, eleifend non, euismod nec, molestie quis, pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean suscipit nisl. In mollis consequat purus. Integer scelerisque. Nullam imperdiet sapien nec lectus. Praesent in orci. Donec magna magna, posuere at, auctor in, sagittis nec, mi. Morbi volutpat, magna pharetra scelerisque lacinia, est erat ultricies neque, nec convallis lorem lorem ut dolor. Proin ac nunc eget nibh pulvinar gravida. Sed pretium, sem ac suscipit imperdiet, mauris ligula dictum nulla, pulvinar interdum pede urna vel magna. In lectus. In sed odio. Quisque eros ligula, placerat nec, tincidunt in, ullamcorper sed, lectus. Nam aliquet orci eget ante. Aliquam aliquet mattis pede. Mauris eleifend nibh vel nunc.
Sed mi lacus, sodales ac, lacinia nec, rutrum sodales, dolor. Morbi convallis molestie enim. Aenean tristique justo. Nullam erat ante, tempor a, suscipit ut, luctus vitae, erat. Proin fermentum. Etiam id erat ut est scelerisque volutpat. Praesent gravida libero vitae sapien. Donec vel elit. In non enim nec quam rutrum sollicitudin. Suspendisse tincidunt adipiscing ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam vel nulla non augue varius pretium. Integer vestibulum enim vel tortor.
Nulla at massa. Vivamus turpis urna, ultrices eget, auctor ullamcorper, ultricies quis, urna. Proin lobortis tincidunt orci. Duis quam neque, mattis vel, rutrum vitae, porttitor id, libero. Vestibulum sagittis lorem eget pede. Curabitur dignissim, nisi sit amet porttitor dignissim, quam felis condimentum arcu, eget facilisis metus lacus in quam. Nulla semper. In hac habitasse platea dictumst. Aenean luctus diam. Aenean consequat massa quis nisi.
Curabitur quam odio, ornare vel, hendrerit ac, sagittis mattis, ipsum. Fusce accumsan, dolor ac suscipit gravida, tortor nibh cursus ligula, at posuere orci arcu euismod ipsum. Nunc iaculis, turpis quis mattis imperdiet, nibh sapien venenatis nulla, id ornare tortor nunc in risus. Morbi lacinia mollis nulla. Donec tempus vestibulum diam. Praesent aliquet metus non orci. Nulla dictum pulvinar sem. Proin mi. Maecenas pharetra enim eget elit. Ut interdum libero ac est. Phasellus accumsan. Praesent vulputate vehicula elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla pretium diam non felis. Aenean at nisl. Proin rutrum tempus mauris. In metus ante, congue eu, vestibulum in, tincidunt sit amet, tortor. Suspendisse non enim eget elit imperdiet fringilla. Pellentesque odio erat, consequat vitae, euismod nec, congue sed, lectus. Praesent tempor urna.
The name of this tab is taken from the TITLE attribute instead of from the H2 element, then the TITLE attribute is erased so it does not cause a mouseover tooltip over the content area.