Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
This chapter is from the book

Using Code Collapse

Code Collapse lets you hide selections of code so that you can view and edit different sections of a document without having to scroll the Document window.

To collapse a code selection:

  1. In Code view, make a selection of code ( Figure 3.12 ). The selection displays with a collapse button to the left of the beginning and end of the selection. The collapse button is a square with a minus sign (Windows) or an inverted triangle (Mac).
    03fig12.jpg

    Figure 3.12 A minus sign (–) displays next to the beginning and end of a selection of code.

  2. From the Edit menu, choose Code Collapse > Collapse Selection, or click the Collapse Selection button on the Coding toolbar, which is located to the left of the Document window (Figure 3.12). You can also press Ctrl-Shift-C (Windows) or Command-Shift-C (Mac). The collapsed code selection displays with an expand button to the left of the selection ( Figure 3.13 ). The expand button is a square with a plus sign (Windows) or a triangle (Mac).
    03fig13.jpg

    Figure 3.13 An expand button (plus sign) displays next to a selection of collapsed code.

To collapse code outside a selection:

  1. In Code view, make a selection of code ( Figure 3.14 ).
    03fig14.jpg

    Figure 3.14 A collapse button (minus sign) displays next to the beginning and end of a selection of code before the code is collapsed.

  2. From the Edit menu, choose Code Collapse > Collapse Outside Selection, or press Ctrl-Alt-C (Windows) or Command-Option-C (Mac). All the code before and after the selection is collapsed ( Figure 3.15 ).
    03fig15.jpg

    Figure 3.15 Collapse Outside Selection collapses all the code before and after the selection.

To collapse a tag and its contents:

  1. In Code view, place the insertion point anywhere inside an opening or closing tag or within the tag contents ( Figure 3.16 ).
    03fig16.jpg

    Figure 3.16 To select a tag and its contents for collapse, place the insertion point anywhere inside the opening or closing tag or the tag contents.

  2. From the Edit menu, choose Code Collapse > Collapse Full Tag, or click the Collapse Full Tag button on the Coding toolbar ( Figure 3.17 ). You can also press Ctrl-Shift-J (Windows) or Command-Shift-J (Mac).
    03fig17.jpg

    Figure 3.17 The tag and its contents are collapsed to a single line in Code view.

    The tag and its contents are collapsed (Figure 3.17).

To collapse code outside a tag:

  1. In Code view, place the insertion point anywhere inside an opening or closing tag or within the tag contents.
  2. From the Edit menu, choose Code Collapse > Collapse Outside Full Tag, or press Ctrl-Alt-J (Windows) or Command-Option-J (Mac).

To expand a collapsed code selection:

  • In Code view, double-click the selection or, from the Edit menu, choose Code Collapse > Expand Selection.

To expand all collapsed selections of code:

  • From the Edit menu, choose Code Collapse > Expand All; click the Expand All button in the Coding toolbar (Figure 3.12); or press Ctrl-Alt-E (Windows) or Command-Option-E (Mac).
  • + Share This
  • 🔖 Save To Your Account