Add Div to Web Page
Launch Notepad and open any of your HTML documents.
Add this block of HTML code to the document's "body" section:
Locate the "id" and "class" properties in the div tag. To create an expanding and collapsing div, you must give the div an id value. In this example, that value is "MyDiv." The div also has a class property. In this instance, that property's value is "divVisible." That is the name of a CSS class defined in the next section.
Add the following CSS code to the document's "head" section: This creates the "divVisible" class and another class named "divHidden." The "divVisible" class sets its display value to "block." The "block" value makes any HTML element that references the class visible and expands it to occupy space on the Web page. The "divHidden" class sets its display value to "none." Any HTML element referencing that class collapses and leaves no space behind.
Save the HTML document, and open it in your browser. The paragraph containing your paragraph appears.
Click the "Collapse/Expand" button. The text collapses. Click the button again to expand the text. Note how the button and other elements below the text move up when the text collapses and move down when the text expands.