Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Pestañas Fáciles con Javascript</h1>
	
	<div class="t-container" id="t-principal">
		<h2>Crea pestañas de manera fácil con Javascript</h2>
        
		<ul class="t-tabs">
            <li class="t-tab">Como funciona</li>
            <li class="t-tab">HTML</li>
            <li class="t-tab">Javascript</li>
            <li class="t-tab">CSS</li>
            <li class="t-tab" id="c-multiple">Grupos</li>
        </ul>
        <ul class="t-contents">
			<li class="t-content">
				<h3>Estructura HTML</h3>
				<ul>
					<li>Solo hay que copiar la estructura HTML predefinida con las correspondientes clases.</li>
					<li>Añade o elimina elementos <code>li</code> de ambas listas, cada par representa una pestaña con su contenido.</li>
				</ul>
				<h3>Función Javascript</h3>
				<ul>	
					<li>La función busca los elementos <code>li</code> de cada grupo y les asigna un atributo <code>index</code> con un número a cada uno.</li>
					<li>Después oculta o muestra las pestañas y sus elementos de contenido relacionándolos por el atributo <code>index</code> .</li>
				</ul>
				<h3>Estilos CSS</h3>
				<ul>	
					<li>Los estilos CSS son muy básicos.</li>
					<li>Destacamos la pestaña seleccionada y con la propiedad <code>transition</code> mostramos los contenidos de cada pestaña.</li>
				</ul>
				<h3>Grupos de pestañas</h3>
				<ul>
					<li>Puedes mostrar múltiples grupos de pestañas en la misma página sin problema.</li>
					<li>Asegúrate de que el número de elementos <code>li</code> de ambas listas es el mismo dentro de cada grupo de pestañas.</li>
				</ul>
			</li>
			
			<li class="t-content">
				<h4>Estructura HTML </h4>
				<ul>
					<li>Para crear un grupo de pestañas añade la siguiente estructura HTML con las correspondientes clases.</li>
					<li>Añade o elimina elementos <code>li</code> de ambas listas, cada par representa una pestaña con su contenido.</li>
					<li>Asegurate de que los pares de elementos <code>li</code> de cada grupo de pestañas son los mismos.</li>
				</ul>
				<code class="code-block">
				<pre>&lt;div class="t-container"&gt;
  &lt;ul class="t-tabs"&gt;  
    &lt;li class="t-tab"&gt;Uno&lt;/li&gt;  
    &lt;li class="t-tab"&gt;Dos&lt;/li&gt; 
    &lt;li class="t-tab"&gt;Tres&lt;/li&gt;  
  &lt;/ul&gt;
  &lt;ul class="t-contents"&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Uno&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Dos&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Tres&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
				</code>
				<p></p>
			</li>

			<li class="t-content">
				<h4>Función Javascript</h4>
				<ul>
					<li>La función <code>easyTabs()</code> hace el resto...</li>
					<li>Se buscan los pares de elementos <code>li</code> de cada grupo y se les asigna el atributo <code>index</code> con un número a cada uno.</li>
					<li>Se ocultan o muestran las pestañas y sus elementos de contenido relacionándolos por el valor del atributo <code>index</code> .</li>
				</ul>
				<code class="code-block">
				<pre>function easyTabs() {
  var groups = document.querySelectorAll('.t-container');
  if (groups.length &gt; 0) {
    for (i = 0; i &lt; groups.length; i++) {
      var tabs = groups[i].querySelectorAll('.t-tab');
      for (t = 0; t &lt; tabs.length; t++) {
        tabs[t].setAttribute("index", t+1);
        if (t == 0) tabs[t].className = "t-tab selected";
      }
      var contents = groups[i].querySelectorAll('.t-content');
      for (c = 0; c &lt; contents.length; c++) {
        contents[c].setAttribute("index", c+1);
        if (c == 0) contents[c].className = "t-content selected";
      }
    }
    var clicks = document.querySelectorAll('.t-tab');
    for (i = 0; i &lt; clicks.length; i++) {
      clicks[i].onclick = function() {
        var tSiblings = this.parentElement.children;
        for (i = 0; i &lt; tSiblings.length; i++) {
          tSiblings[i].className = "t-tab";
        }
        this.className = "t-tab selected";
        var idx = this.getAttribute("index");
        var cSiblings = this.parentElement.parentElement.querySelectorAll('.t-content');
        for (i = 0; i &lt; cSiblings.length; i++) {
          cSiblings[i].className = "t-content";
          if (cSiblings[i].getAttribute("index") == idx) {
            cSiblings[i].className = "t-content selected";
          }
        }
      };
    }
  }
}</pre>
				</code>
				<p><br></p>
				<ul>
					<li>Hay que llamar a la función <code>easyTabs()</code> cuando el HTML del documento esté cargado.</li>
					<li>De esta manera se detectan y se organizan todos los grupos de pestañas existentes.</li>
				</ul>
				<code class="code-block">
				<pre>(function() { 
  easyTabs();
})();</pre>
				</code>
				<p></p>
			</li>
			
			<li class="t-content">
				<h4>Estilos CSS </h4>
				<ul>
					<li>Los estilos CSS, aparte del diseño de las pestañas, son muy básicos.</li>
					<li>Destacamos la pestaña seleccionada.</li>
					<li>Aplicando la propiedad <code>transition</code> mostramos el contenido de la pestaña seleccionada.</li>
				</ul>
				<code class="code-block">
				<pre>.t-container {
  margin: 0 auto;
  padding: 0 2em;
}
.t-tabs, .t-contents {
  list-style-type: none;
  margin: 0;
  padding: 0 2% 0 2%;
  box-sizing: border-box;
}
.t-tabs li {
  color: #dedede;
  padding: 0.5em 0.7em;
  text-decoration: none;
  float: left;
  text-align: center;
  font-size: 1.1em;
  background: #717171;
  border-bottom: 0;
  min-width: 40px;
  margin-right: 2px;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
}
.t-tabs li:hover {
  background-color: #545454;
  color: #d2d2d2;
}
.t-tabs li.selected {
  color: #458ace;
  cursor: default;
  background: #333;
}
.t-contents {
  padding: 0 !important
}
.t-content {
  padding: 0 1em;
  background-color: #333;
  box-sizing: border-box;
  float: left;
  width: 100%;
  color: #b7b7b7;
  line-height: 1.3em;
  text-align: justify;
  z-index: 1;
  position: relative;
  max-height: 0;
  transition: max-height 0.5s ease 0s;
  overflow: hidden;
}
.t-content.selected {
  max-height: 3000px;
  transition: max-height 1.25s ease 0.5s;
}</pre>
				</code>
				<p></p>
			</li>
			
			<li class="t-content">
				<h4>Grupos de pestañas</h4>
				<ul>
					<li>Puedes mostrar múltiples grupos de pestañas en la misma página sin problema.</li>
					<li>Asegúrate de que el número de elementos <code>li</code> de ambas listas es el mismo dentro de cada grupo de pestañas.</li>
					<li>No se puede anidar un grupo de pestañas dentro de otro grupo de pestañas, se crean conflictos con los atributos <code>index</code> .</li>
				</ul>
				<code class="code-block">
				<pre>&lt;div class="t-container"&gt;
  &lt;ul class="t-tabs"&gt;  
    &lt;li class="t-tab"&gt;Uno&lt;/li&gt;  
    &lt;li class="t-tab"&gt;Dos&lt;/li&gt; 
    &lt;li class="t-tab"&gt;Tres&lt;/li&gt;  
  &lt;/ul&gt;
  &lt;ul class="t-contents"&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Uno&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Dos&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido Tres&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="t-container"&gt;
  &lt;ul class="t-tabs"&gt;  
    &lt;li class="t-tab"&gt;1&lt;/li&gt;  
    &lt;li class="t-tab"&gt;2&lt;/li&gt; 
    &lt;li class="t-tab"&gt;3&lt;/li&gt;  
    &lt;li class="t-tab"&gt;4&lt;/li&gt;  
  &lt;/ul&gt;
  &lt;ul class="t-contents"&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido 1&lt;br&gt;1111111111&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido 2&lt;br&gt;2222222222&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido 3&lt;br&gt;3333333333&lt;/p&gt;&lt;/li&gt;
    &lt;li class="t-content"&gt;&lt;p&gt;Contenido 4&lt;br&gt;4444444444&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>
				</code>
				<p></p>
				
			</li>
        
		</ul>
		<!--<div class="separator"></div>-->
	
    </div><!-- .t-container -->
	<div class="t-arrow"></div>

	
	
	<div class="t-container">
	   <ul class="t-tabs">  
		 <li class="t-tab">Uno</li>  
		 <li class="t-tab">Dos</li> 
		 <li class="t-tab">Tres</li>  
	   </ul>
	   <ul class="t-contents">
	     <li class="t-content"><p>Contenido Uno</p></li>
	     <li class="t-content"><p>Contenido Dos</p></li>
	     <li class="t-content"><p>Contenido Tres</p></li>	   
       </ul>
	   <div class="separator"></div>
	</div>
	
	
	
	<div class="t-container" id="t-multiple">
	   <ul class="t-tabs">  
		 <li class="t-tab">1</li>  
		 <li class="t-tab">2</li> 
		 <li class="t-tab">3</li>  
		 <li class="t-tab">4</li>  
	   </ul>
	   <ul class="t-contents">
	     <li class="t-content"><p>Contenido 1<br>11111111111</p></li>
	     <li class="t-content"><p>Contenido 2<br>2222222222</p></li>
	     <li class="t-content"><p>Contenido 3<br>3333333333</p></li>	
	     <li class="t-content"><p>Contenido 4<br>4444444444</p></li>	   
       </ul>
	   <div class="separator"></div>
	</div>
	
              
            
!

CSS

              
                body {
	color: #333;
	font-family: Arial, Helvetica, Sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
	background: url(http://josetxu.com/img/fondo_blanco.png) repeat 0 0 #fff;
}
h1 {
	background: #333;
	font-family: "Raleway", Arial, Helvetica, serif;
	color: #fff;
	text-align: center;
	padding: 0.5em;
	margin: 0 0 1em 0;
}
h2 {
	font-weight: normal;
	font-family: "Raleway", Arial, Helvetica, serif;
	color: #458ace;
	text-align: center;
	margin-bottom: 1em;
}
h3 {
	font-weight: normal;
	color: #458ace;
}
h4 {
	font-weight: normal;
	color: #717171;
	font-size: 1.2em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.t-container {
	margin: 0 auto;
	padding: 0 2em;
}
.t-tabs, .t-contents {
	list-style-type: none;
	margin: 0;
	padding: 0 2% 0 2%;
	box-sizing: border-box;
}
.t-tabs li {
	color: #dedede;
	padding: 0.5em 0.7em;
	text-decoration: none;
	float: left;
	text-align: center;
	font-size: 1.1em;
	background: #717171;
	border-bottom: 0;
	min-width: 40px;
	margin-right: 2px;
	margin-bottom: 0 !important;
	box-sizing: border-box;
	cursor: pointer;
}
.t-tabs li:hover {
	background-color: #545454;
	color: #d2d2d2;
}
.t-tabs li.selected {
	color: #458ace;
	cursor: default;
	background: #333;
}
.t-contents {
	padding:0 !important
}
.t-content {
	padding: 0 1em;
	background-color: #333;
	box-sizing: border-box;
	float: left;
	width: 100%;
	color: #b7b7b7;
	line-height: 1.3em;
	text-align: justify;
	z-index: 1;
	position: relative;
	max-height: 0;
	transition: max-height 0.5s ease 0s;
	overflow: hidden;
}
.t-content.selected {
	max-height: 3000px;
	transition: max-height 1.25s ease 0.5s;
}
.t-content ul {
	padding-left: 1.4em;
	margin-bottom: 1.75em;
}
.t-content ul li {
	margin-bottom: 0.5em;
}
.t-content ul li:before {
	content: "●";
	float: left;
	margin-left: -19px;
	color: #3c7ab7;
	z-index: 2;
	position: relative;
}

code {
	background: #1f1f1f70;
	padding: 0.01em 0.4em;
	border-radius: 2px;
	color: #4388cc;
	font-size: 1.2em;
	border: 1px solid #292929;
}
code.code-block {
	width: 100%;
	box-sizing: border-box;
	display: inline-block;
	margin-left: 4px;
	border-left: 8px solid #3c7ab7;
	font-size: 0.9em;
	padding-left: 0.75em;
}
code.code-block span {
	color: #717171;
}
.separator {
	width: 100%;
	float: left;
	height: 0;
	margin: 3em 0;
}
.t-arrow {
    padding: 0 5em;
    display: table;
}
.t-arrow:before {
	content: "";
    border: 2em solid transparent;
    float: left;
    z-index: 222;
    border-top: 2em solid #333;
    bottom: 0;
    display: block;
}
#t-multiple {
	display: none;
}
#t-multiple.showit {
	display: block !important;
}
              
            
!

JS

              
                function easyTabs() {
	
		var groups = document.querySelectorAll('.t-container');
		
		//if t-container
		if (groups.length > 0) {
	
			for(i = 0; i < groups.length; i++){
				//tabs
				var tabs = groups[i].querySelectorAll('.t-tab');
				for(t = 0; t < tabs.length; t++){
					tabs[t].setAttribute("index", t+1);
					if(t==0)tabs[t].className="t-tab selected";
				}
				//contents
				var contents = groups[i].querySelectorAll('.t-content');
				for(c = 0; c < contents.length; c++){
					contents[c].setAttribute("index", c+1);
					if(c==0)contents[c].className="t-content selected";
				}
				if(tabs.length!=contents.length) alert('ERROR: \r\nEl número de elementos <li> y <div> de algún grupo de pestañas creado no es el correcto. Por favor, revísalo para corregir el error.');
			}
			
			//clicks
			var clicks = document.querySelectorAll('.t-tab');
			for(i = 0; i < clicks.length; i++){
				clicks[i].onclick = function() {
					//remove tab selected classes
					var tSiblings = this.parentElement.children;
					for(i = 0; i < tSiblings.length; i++){
						tSiblings[i].className="t-tab";
					}
					//add tab selected class
					this.className="t-tab selected";
					var idx = this.getAttribute("index"); 
					if(idx==5)document.getElementById('t-multiple').className='t-container showit';
					else 
						if(this.parentElement.parentElement.getAttribute('id')=='t-principal')document.getElementById('t-multiple').className='t-container';
					// selected content
					var cSiblings = this.parentElement.parentElement.querySelectorAll('.t-content');
					for(i = 0; i < cSiblings.length; i++){
						//remove content selected classes
						cSiblings[i].className="t-content";
						//add content selected classes					
						if(cSiblings[i].getAttribute("index")==idx){
							cSiblings[i].className="t-content selected";
						}
					}					
				};
			}
		
		}
	}

	(function() { 
		easyTabs() ;
	})();
              
            
!
999px

Console