JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Acordeon</title>
</head>
<body>
<div id="accordion">
  <h3> el enlace del primer elemento <span></span></h3>
  <div> el contenido del primer elemento </div>
  <h3> el enlace del segundo elemento <span></span></h3>
  <div> el contenido del segundo elemento </div>
  <!-- y seguimos agregando elementos enlace + contenido -->
</div>
</body>

</html>

CSS

#accordion { /* el rectángulo contenedor */
    width:450px;
  }
  #accordion h3 { /* los enlaces que despliegan y contraen el contenido */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px #444 inset;
    -webkit-box-shadow: 0 0 10px #444 inset;
    box-shadow: 0 0 10px #444 inset;
    background-color: #DCDFF4;
    color: #424242;
    cursor: pointer;
    font-family: Tahoma;
    font-size: 17px;
    font-weight: normal;
    height: 1.7em;
    line-height: 1.7em;
    margin: 0 0 2px;
    padding: 0 20px;
    position: relative;
  }
  #accordion h3:hover { /* efecto hover sobre esos enlaces */
    -moz-box-shadow: 0 0 10px #000 inset;
    -webkit-box-shadow: 0 0 10px #000 inset;
    box-shadow: 0 0 10px #000 inset;
    background-color: #BBBFF4;
    color: #000;
  }
  #accordion h3 span { /* una imagen que permuta segñun el estado del contenido */
    background: transparent url(http://img810.imageshack.us/img810/6159/demoacordeonjs.gif) no-repeat right top;
    display: block;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 7px;
    width: 16px;
  }
  #accordion h3.active span { /* desplegado */
    background-position: right bottom;
  }
  #accordion div { /* el contenido */
    background-color: #81DAF5;
    border: 1px dotted #0080FF;
    color: #000;
    font-family: Georgia;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px;
    padding: 10px;
  }

JavaScript

$("#accordion h3:first").addClass("active");
    $("#accordion div:not(:first)").hide();
    $("#accordion h3").click(function(){
        $(this).next("div").slideToggle("slow")
        .siblings("div:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
 });