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.

Collapsing and expanding code fragments

To collapse code:

1. Select some code.
2. Select Edit > Code Collapse > Collapse Selection, or click one of the collapse buttons next to the selection.

To collapse the code outside a selection:

1. In Code view, select some code.
2. Select Edit > Code Collapse > Collapse Outside Selection.

   TIP

   You can also collapse the code outside a selection by Alt-clicking (Windows) or Option-clicking (Macintosh) one of the collapse buttons or the Collapse Selection button in the Coding toolbar.

To collapse a tag and all the content it encloses:

1. In Code view, place the insertion point inside an opening or closing tag (for example, inside the <table> or </table> tag).
2. Select Edit > Code Collapse > Collapse Full Tag.

   TIP

   You can also collapse a full tag by right-clicking the tag in the tag selector, and selecting Collapse Full Tag.

To collapse the code outside a full tag:

1. Do one of the following:
   • In Code view, place the insertion point inside an opening or closing tag (for example, inside the <table> or </table> tag).
   • In Code view, select part of an opening or closing tag.
2. Select Edit > Code Collapse > Collapse Outside Full Tag.

   TIP

   You can also collapse the code outside a full tag by right-clicking the tag in the tag selector and selecting Collapse Outside Full Tag, or by placing the insertion point inside an opening or closing tag and Alt-clicking the Collapse Full Tag button in the Coding toolbar.

To select a collapsed code fragment:

• In Code view, click the collapsed code fragment.

  NOTE

  When you make a selection in Design view that is part of a collapsed code fragment, Dreamweaver automatically expands the fragment in Code view. When you make a selection in Design view that is a complete code fragment, the fragment remains collapsed in Code view.

To expand a code fragment:

• Do one of the following:
  • In Code view, double-click the code fragment.
  • Select Edit > Code Collapse > Expand Selection.

To view the code in a collapsed code fragment without expanding it:

• Hold the mouse pointer over the collapsed code fragment.

To expand all collapsed code fragments:

• Select Edit > Code Collapse > Expand All.

You can also use the following keyboard shortcuts to execute any of the previous commands: