Collapsing Code

If you've spent much time working with tags and code, you'll often find yourself in a situation where you wish you could hide just some of it. Thankfully, that's now an option with Dreamweaver 8.

To collapse code:

1.

In Code view, select the code that you want to collapse ( Figure 15.22 ). The simplest way to do this is to click somewhere inside the area, and then click the Select Parent Tag button on the Coding toolbar (Figure 15.3). Figure 15.22. Select the code to collapse and then look for the vertical line on the left (on Windows, top; on Mac, bottom).

2.

Just to the left of the code, you'll see a vertical line that goes from the beginning of the selected area to the end. Windows users will see a white box with a minus sign on each end and Mac users will see two gray triangles , the top one facing down and the bottom one facing up. Click one of these endpoints, and the selected code collapses ( Figure 15.23 ). You'll now see the first part of the first line inside a highlighted box, plus a white box with a plus sign (Windows) or a right-facing gray arrow (Mac). Figure 15.23. Click one of the icons on the endpoints of the line, and the selected text collapses to a single line. or Click anywhere inside the tag you want to collapse, and click the Collapse Full Tag button on the Coding toolbar. or Select the code you want to collapse, and click the Collapse Selection button on the Coding toolbar. or Click in a particular location on the page, and press the Alt (Option) key while clicking the Collapse Full Tag button on the Coding toolbar. This collapses everything but the full tag around your particular cursor position. or Select a segment of code, and press the Alt (Option) key while clicking the Collapse Selection button on the Coding toolbar. This collapses everything but the current selection. or Right-click inside a tag on the page, and choose Selection from the pop-up menu ( Figure 15.24 ). From there, you can choose to Collapse Selection, Collapse Outside Selection, Collapse Full Tag, or Collapse Outside Full Tag. Figure 15.24. You can also collapse code by right-clicking on the selection and choosing one of the collapse options.

To work with collapsed code:

• Put your cursor over the highlighted box, and a tip appears displaying all of the collapsed code ( Figure 15.25 ).

  Figure 15.25. If you want to know what's collapsed, this tool tip gives you the info without actually expanding the code.

  

• Collapse a section of code if you need to move it from one area of the page to another. You'll know that you're moving exactly what you want to move and no more.

• If you collapse a section of code and then save and close the page, the next time you open the page that section will still show as collapsed.

To expand code:

• Click the collapsed code symbol (the white box with a plus sign (Windows) or the right-facing gray arrow (Mac) to the left of the code you wish to expand.

  or

  Double-click the highlighted box.

  or

  Click the Expand All button on the Coding toolbar, which expands all the collapsed code on the page.

  or

  Right-click on the page, and choose Selection from the pop-up menu (Figure 15.24). From there, you can choose to Expand Selection or Expand All.