# Showing and hiding a code example with jQuery

The code

    $( document ) . ready (
      function() {
        $( 'pre' ).before( '<p><a class="trigger" href="#">Show code</a></p>' );
        $( 'pre' ).hide();
        $('a.trigger').toggle (
          function() {
            $(this.parentNode.nextSibling).slideDown('slow');
            $(this).html('Hide Code');
          },
          function() {
            $(this.parentNode.nextSibling).slideUp('slow');
            $(this).html('Show Code');
          }
        )
      }
    )

The CSS

    *{
      margin:0;
      padding:0;
    }
    body{
      font-size:100.01%;
      font-family:Arial,sans-serif;
      color:#333;
      background:#f8f8f8;
      padding:2em;
    }
    h1{
      color:#363;
      font-size:1.2em;
    }
    pre{
      background:#eee;
      border:1px solid #999;
      padding:.5em;
      margin:.5em;
      font-size:.9em;
    }
    a{
      color:#369;
      font-size:.8em;
    }

jQuery homepage