About collapsing code

Dreamweaver lets you collapse and expand code fragments so that you can view different sections of your document without having to use the scroll bar. For example, if you want to see all of the CSS rules in the head tag that apply to a div tag farther down the page, you can collapse everything between the head tag and the div tag so that you can see both sections of code at once. Although you can select code fragments by making selections in Design view or Code view, you can collapse code only in Code view.

When you select code, Dreamweaver adds a set of collapse buttons next to the selection (Minus symbols in Windows; vertical triangles on the Macintosh). To collapse the selection, click one of the buttons. When the code is collapsed, the collapse buttons change to an expand button (a Plus button in Windows; a horizontal triangle on the Macintosh). To expand the collapsed selection, click the expand button. For information about other ways of working with collapsed code, see Collapsing and expanding code fragments.

At times, Dreamweaver may not collapse the exact fragment of code that you selected. Dreamweaver uses "smart collapse" to collapse the most common and visually pleasing selection. For example, if you selected an indented tag and then selected the indented spaces before the tag as well, Dreamweaver would not collapse the indented spaces, because most users would expect their indentations to be preserved. If you want to disable smart collapse, and force Dreamweaver to collapse exactly what you selected, you can do so by holding down the Control key before collapsing your code.

Additionally, Dreamweaver places a warning icon on collapsed code fragments if a fragment contains errors or code that is unsupported by certain browsers.

Related topics

• Collapsing and expanding code fragments
• Pasting and moving collapsed code fragments
• Cleaning up your code
• Inserting code quickly with the Coding toolbar