Edit in JSFiddle

<pre><code>
    &lt;doc xmlns:lxslt=&quot;http://xml.apache.org/xslt&quot; xml:lang=&quot;it&quot;&gt;<br/>    &lt;articolo id=&quot;U50779749147XPB&quot;&gt;<br/>        &lt;testatina id=&quot;U50779749147xtG&quot;&gt;<br/>            &lt;ln&gt;in breve&lt;/ln&gt;<br/>        &lt;/testatina&gt;<br/>        &lt;breve id=&quot;U50779749147yAC&quot;&gt;<br/>            &lt;h1&gt;melegnano&lt;/h1&gt;<br/>            &lt;h2&gt;Si ribalta&lt;/h2&gt;<br/>            &lt;h2&gt;con l&#x2019;auto&lt;/h2&gt;<br/>            &lt;h2&gt;alla rotonda&lt;/h2&gt;<br/>            &lt;p&gt;<br/>                &lt;span class=&quot;rettangolo&quot;&gt;n&lt;/span&gt;<br/>                Sempre caro mi fu quest'ermo colle, e questa siepe, che da tanta<br/>                parte dell'ultimo orizzonte il guardo esclude. Ma sedendo e mirando,<br/>            &lt;/p&gt;<br/>            &lt;p class=&quot;rimando&quot;&gt;<br/>                segue a pagina<br/>                &lt;span class=&quot;pagina&quot;&gt;5&lt;/span&gt;<br/>            &lt;/p&gt;<br/>            &lt;h1&gt;castelnuovo&lt;/h1&gt;<br/>            &lt;h2&gt;Protesta&lt;/h2&gt;<br/>            &lt;h2&gt;delle mamme&lt;/h2&gt;<br/>            &lt;h2&gt;per la scuola&lt;/h2&gt;<br/>            &lt;p&gt;<br/>                &lt;span class=&quot;rettangolo&quot;&gt;n&lt;/span&gt;<br/>                Sempre caro mi fu quest'ermo colle, e questa siepe, che da tanta<br/>                parte dell'ultimo orizzonte il guardo esclude. Ma sedendo e mirando<br/>        &lt;/p&gt;<br/>            &lt;p class=&quot;rimando&quot;&gt;<br/>                segue a pagina<br/>                &lt;span class=&quot;pagina&quot;&gt;8&lt;/span&gt;<br/>            &lt;/p&gt;<br/>            &lt;h1&gt;salerano&lt;/h1&gt;<br/>            &lt;h2&gt;sull&#x2019;incendio: &lt;/h2&gt;<br/>            &lt;h2&gt;&#x00ab;non ci sono &lt;/h2&gt;<br/>            &lt;h2&gt;misteri&#x00bb;&lt;/h2&gt;<br/>            &lt;p&gt;<br/>                &lt;span class=&quot;rettangolo&quot;&gt;n&lt;/span&gt;<br/>                Sete il guardo esclude. Ma sedendo e mirando, interminati spazi di<br/>            &lt;/p&gt;<br/>            &lt;p class=&quot;rimando&quot;&gt;<br/>                segue a pagina<br/>                &lt;span class=&quot;pagina&quot;&gt;6&lt;/span&gt;<br/>            &lt;/p&gt;<br/>        &lt;/breve&gt;<br/>    &lt;/articolo&gt;<br/>&lt;/doc&gt;
    </code></pre>

pre {
    padding: 5px;
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    margin-bottom: 10px;
    background-color: #eeeeee;
    overflow: auto;
    width: auto;
    width: 650px !ie7;
    padding-bottom: 20px !ie7;
    max-height: 150px;
    
    position:relative;
}

/** NEW STYLES **/
.expand-code{
    position:absolute;
    top:10px;
    right:5px;
    background:none;
    border:none;
}

jQuery(function($) {
    
    $('pre').each(function () {
        $(this).append('<button class=expand-code>&#9660;</button>');
    });
    
    $('.expand-code').click(function () {
        var pre = $(this).parent('pre');
        if (!pre.data('expanded')) {
            pre.css('max-height', '600px').data('expanded', true);
            $(this).html('&#9650;');
        } else {
            pre.css('max-height', '150px').data('expanded', false);
            $(this).html('&#9660;');
        }
    });
    
});