Un área de contenido individual con múltiples paneles, cada uno asociado con un encabezamiento en una lista.
Haga clic en las pestañas para cambiar entre el contenido que se divide en secciones lógicas.
Solo accede a Todas las Entradas | Publicar Entrada Nueva | HTML y en ella pegamos:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nombre de la primer Tab</a></li>
<li><a href="#tabs-2">Nombre de la segunda Tab</a></li>
<li><a href="#tabs-3">Nombre de la tercera Tab</a></li>
</ul>
<div id="tabs-1">
<p>CONTENIDO DE LA PRIMER TAB</p>
</div>
<div id="tabs-2">
<p>CONTENIDO DE LA SEGUNDA TAB</p>
</div>
<div id="tabs-3">
<p>CONTENIDO DE LA TERCERA TAB</p>
</div>
</div>
</body>
</html>
Solo cambiuas lo de Rojo por tus titulos y lo de Azul por tu contenido. Puedes insertar contenido HTML como audio, video, imagenes o texto.
Fuente | jQuery User Interface