computerf58
New Member
You may check this link for preview and source : http://tympanus.net/Tutorials/CSS3ContentTabs/
As title says i want a way to provide "Add a new tab" feature without using jquery.
To add a new tab, i have to add a value in the css and then in HTML, so i am wondering is there a way to 'Add new Tab' in pure CSS3 and html not using jquery ?
Here's the CSS that i am using :
\[code\].tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4 { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s;}\[/code\]
As title says i want a way to provide "Add a new tab" feature without using jquery.
To add a new tab, i have to add a value in the css and then in HTML, so i am wondering is there a way to 'Add new Tab' in pure CSS3 and html not using jquery ?
Here's the CSS that i am using :
\[code\].tabs input.tab-selector-2:checked ~ .content .content-2,.tabs input.tab-selector-3:checked ~ .content .content-3,.tabs input.tab-selector-4:checked ~ .content .content-4 { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter:"progid
XImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s;}\[/code\]