Paneles desplegables con HTML5 estilo MEGA para blogger

Hay varias formas de crear contenedores que se expanden se los puede construir conJQuery y asta el mismo CSS3 pero hoy les presento una nueva forma conHMTL5 siendo unatecnologíanueva y que espero google agregue a blogger!,pero como no me gusta esperar me puse manos alcódigo.

las etiquetasdetails ysummary son etiquetas simples que solo debemos de armar sin tanto programar solo añadir cualquier contenido o contenedor dentro de ellas y el navegador se encargara del resto ,ahora HTML5 al ser unatecnologíanuevahabráciertosnavegadores que no funcionara por el momento el unico que no da problemas y que asta el mismo MEGA recomienda es Google Chrome.
puedes ver un ejemploAQUI

dentro de blogger dirigase alaopciónPlantilla - Editar HTML y realice lacombinaciónde teclas CTRL-F para abrir el buscador y coloque lo siguiente/b:skin una vez que aya encontrado este codigo justo arriba de el pegue el siguiente codigo css.

details{
 color: #000;
 border: solid 1px #000;
 background: #fff;
 border:0px;
}
details p{
 text-align: justify;
}
details img{
 display: block;
    margin: auto;
}
summary{
   padding: 10px;
   color: #fefbfb;
   font-size: 16px;
   font-weight: normal;
   font-family: 'Open Sans', Arial, Helvetica, sans-serif;   
   text-align:left;
   cursor: pointer;
   background-color:#d11e00;
  -webkit-box-sizing: border-box;
}
summary::-webkit-details-marker {
  display: none
}
summary:after {
  content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicO4lpamOBpqb9eN8-glAfuvNVL1OSssgu97hCHIYGc4h4cj2lFGGbRGX9I7zFehLqCFpMFN-DtZTYtW9Ya7OsrGFTcem2xrbVyMuZ3H8_M42e78LdfsxpX05bmdKIG8E49kwGewSQzxI/s26/cloud.png"); 
  color: #fff; 
  float: left; 
  font-size: 1.5em; 
  font-weight: bold; 
  margin: -5px 17px 0 0; 
  padding: 0; 
  text-align: center; 
  width:20px;
}
details[open] summary:after {
  content:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-PPLf_zvZ0hN6FGRQrIsb1w5ClHiKIURHoYs0CY0wRyqSW_z1qV9ZkNLe5MRA5ONpZf2LbyyLSLXZkK9K3YSdrvFOPrqSHfbnW3n4VdYFp9okoeugWP_GDrl6bFXs-l0PdgSBnMOeHtg/s32/cloud-dow.png");
}

#contenedor{
 padding: 10px;
}
.contenido{
 padding: 10px;
}

ustedpodrámodificar a su justo elcódigocss.

Paso 2) Añadiendo estructura y contenedores

ahora formaremos las etiquetas details y summary unaaclaraciónla etiqueta details me forma el contenedor y la etiqueta summary coloca el titulo.

div id="contenedor"
    details open
        summaryTITULO 1/summary
        div class="contenido"
         p
          TU CONTENIDO         /p
        /div
    /details
                !--CIERRE1--
                !--INICIO 2--
    details
     summaryTITULO 2/summary
     div class="contenido"
      p
          TU CONTENIDO         /p
     /div
    /details
                !--CIERRE 2--
                !--INICIO 3--
    details
        summaryTITUTLO 3/summary
        div class="contenido"
         TU CONTENIDO
        /div
    /details
                !--CIERRE--
   /div
             /div

Si se desea que todos los contenedoresaparezcanen estado cerrado solo debe de eliminar la condicionalopen caso contrario si se desea que uno o varios aparescan abiertos solo debe de agregar al details la condicionalopen , ejm:

details open
        summaryQue es Java?/summary
        div class="contenido"
         p
Java es un lenguaje de programación y la primera plataforma informática creada por Sun Microsystems                           en 1995. Es la tecnología subyacente que permite el uso de programas          /p
        /div
    /details