/ best free open source web resources /

Graphic Resources

How to Make an Expanding Code Box with jQuery

Posted · Category: Code, License Free

On blogs that like to share snippets of code, it is common to use the <pre> tag to wrap the code so that the spacing/indenting is maintained and long lines do not wrap. While this is desirable behavior, it can be undesirable to have those un-wrapped lines break out of their containers awkwardly and overlap other content.

On Digging Into WordPress, they taught us How to Make an Expanding Code Box by using JavaScript (jQuery) to solve this problem. One solution could potentially be to use only CSS and expand the width with something like pre:hover, but JavaScript is more elegant. It expands only when needed. It expands only to as wide as needed. And also, it expands with animation.

Expand Code

Requirements: jQuery Framework
Demo: http://diggingintowordpress.com/2009/07/making-an-expanding-code-box/
License: License Free

  • mrLami

    I think making it a text area that scrolls horizontally is way better.

    Then printing might become an issue, but one can easily use a different css for printing pages with code.

    I’m curious as to what you think is the best method to do this.

  • Ray Cheung

    @ mrLami,

    Yes, of course we should use a seperate CSS file for printing. Also, we can use Syntax Highlighting Plugins for showing the code nicely on website. You can have a look at the following options.

    Free Syntax Highlighting Class Developed with MooTools
    Syntax Highlighter Helps Posting Code Snippets Online

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons