How to Make Expandable Text in Dreamweaver

Expandable text allows users to see it only when needed.

Professional Web developers often rely on behaviors and events to create many of the interactive pages you see on the Internet. A behavior is an action that happens to an object on a Web page. An event causes that action to happen. Adobe's Dreamweaver program can help you add useful behaviors and events to your own Web pages. By attaching an "onClick" event to text on your page, you can create expandable text that appears and disappears on demand.

Instructions

1. Open Dreamweaver and click "Design." Select "Insert," and then click "Layout Objects." Choose "Div Tag." Dreamweaver places a div element on the page. The div's ID value is "div1." A dotted box appears around the div. Type "Toggle Text" inside the div.

2. Right-click the div, click "CSS Styles," and then click "New." Type "hidden" in the "Selector Name" text box, then select "OK." Click "Block," choose "Display," and then press "None." These actions create a new CSS class named "hidden." This class has a display attribute whose value is "None." Click "OK."

   Right-click the div again, select "CSS Styles" and then click "hidden." The div will disappear because you applied the hidden class to the div.

3. Press "Shift" and "F4" to open the Behaviors panel. This panel allows you to associate events and behaviors with page elements. Select the "Plus Sign," and then click "Call JavaScript." Type "toggleText()" in the "JavaScript" text box, then click "OK." Dreamweaver creates a new behavior for the div element. This behavior is a call to a JavaScript function named "toggleText()."

4. Click the drop-down arrow to the left of the words "Call JavaScript," and then choose "onClick." This attaches an onClick event to the behavior.

5. Select an empty space below the div, and then click "Insert." Choose "Layout Objects" to reopen the "Insert Div Tag" window. Type "div2" in the "ID" text box, and then click "OK." A new div -- whose ID is "div2" -- appears below the previous div. Type a short sentence in the new div. This text will appear and disappear when users click the words "Toggle Text."

6. Click "Code" to view the Code window, and find the following text near the top of the window:

   <script type="text/javascript">

7. Paste this JavaScript function after that line of text:

   function toggleText() {

   var div = document.getElementById("div2");

   var text = document.getElementById("displayText");

   var currentDisplay = div.style.display;

   if (currentDisplay != "block")

   div.style.display = "block"

   else

   div.style.display = "none";

   }

   This code creates the toggleText function. The function retrieves a reference to the div2 element and sets its display attribute to "none" if div2 is hidden. Otherwise, the function sets div2's value to "block."

8. Click the "Live View" button to see your Web page in Live View mode. The words "Toggle Text" appear. Click the words several times. As you do, the sentence you typed in div2 will expand and contract.

Tips & Warnings

• This example used the words "Toggle Text" in div1, the trigger that causes the text in div2 to expand. You could also replace the text in div1 with a button that performs the same task. Many websites use small "Plus Sign" buttons that cause text in another div to expand.

References

• Adobe Help: Adobe Dreamweaver CS5 &Amp; CS5.5 * About JavaScript Behaviors

Resources

• Adobe: Learn Dreamweaver