show/hide bloc code

J'ai limité la hauteur pour remédier temporairement au problème.

Nickel merci. J'ai un peu zieuter rapidement de mon coté, un truc dans ce style ça ferait l'affaire à ton avis ?

pre[class^="language"]{
height: 50px;
}
pre[class^="language"].is-active{
height:auto;
}

Et coté jikouéry :

var cb = $('pre[class^="language"]');
        cb.on('click',function(event){
            e.preventDefault();
            $(this).toggleClass('is-active');
        });

le risque c'est que certaines personnes ne comprennent pas que l'on peut cliquer dessus non ?

J'ai pondu ça à la va vite (le principe est là, mais c'est mal codé, moche, tu peux crier et me bannir si tu veux xD).

Coté css, on attribut une hauteur fixe au wrapper et on lui colle un overflow:hidden;dans un premier temps. Le coté cool c'est que t'as pas à toucher au html généré via ton éditeur.

.bloc{
  background:#EAEAEA;
}
.code-bloc{
  margin:50px 0;
  border:1px solid red;
  height:30px;
  overflow: hidden;
  padding-bottom: 5px;
  position: relative;
}
.code-bloc::before{
  content:"Cliquer pour afficher/cache";
  display: block;
  height:20px;
  width:200px;padding:5px 10px;
  background: #000;color: #F00;
  position: absolute;
  right: 0;bottom: 0;
  border-radius:3px;
}
.code-bloc.is-active{
  height: auto;
  overflow: auto;
}

Ensuite coté js, on prend tous les blocs, on les englobe dans une div spécial avec infobule et hop le tour est joué.

  var cb = $('.bloc');
          cb.each(function(){
              $(this).wrapAll('<div class="code-bloc" />');
          });
  $(".code-bloc").on('click',function(e){
      $(this).toggleClass('is-active');
  });

PS : je me suis insulter moi même en tapant ce morceau de code.

Je vais peux être en rajoutter une couche mais avec une animation de déroulement sa serait le top <3

PS : On aime la perfection me taper pas sur les doigts.

Avant c'était pas mal quand il y avait le double clique sur un bloc de code qui devenait une textarea. (pour pouvoir mieux sélectionner/copier le code ^^)