Ocultar y mostrar texto en nuestras entradas

Al igual que los pos anteriores, podemos usar una tabla para mostrar textos.

Copia este código

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: ;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<p>
In this example, we use JavaScript to "click" on the London button, to open the tab on page load.</p>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
  <h3>
London</h3>
<p>
London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
  <h3>
Paris</h3>
<p>
Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h3>
Tokyo</h3>
<p>
Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

Y así se mostrará

Fade in Tabs

London

Londres es la capital y mayor ciudad de Inglaterra y del Reino Unido. Situada a orillas del río Támesis, Londres es un importante asentamiento humano desde que fue fundada por los romanos con el nombre de Londinium hace casi dos milenios.

Paris

París es la capital de Francia y su ciudad más poblada. Capital de la región de Isla de Francia, constituye la única comuna unidepartamental del país. .

Tokyo

TTokio es la capital de facto de Japón, localizada en el centro-este de la isla de Honshu, concretamente en la región de Kanto. En conjunto forma una de las 47 prefecturas de Japón, aunque su denominación oficial es metrópolis o capital..

Ocultar y mostrar texto en nuestras entradas

Fade in Tabs

London

Paris

Tokyo

Publicar un comentario

0 Comentarios

Todo Ordinary

Etiquetas

Recent-Post

Popular Posts

Calcular horas extras con Excel

Microsoft Oficce Access plantillas

Fórmula Excel, Suma

Subscribe Us

Recent Posts

Random Post

Recent in Fashion

Follow Us

Ocultar y mostrar texto en nuestras entradas

Fade in Tabs

London

Paris

Tokyo

Publicar un comentario

0 Comentarios

Todo Ordinary

Etiquetas

Social Plugin

Recent-Post

Popular Posts

Calcular horas extras con Excel

Microsoft Oficce Access plantillas

Fórmula Excel, Suma

Subscribe Us

Recent Posts

Random Post

Recent in Fashion

Follow Us