TIP - To keep your main (html) - page neat and easy to read, you can put the head or body javascript into an external .js file (minus html tags) and reference it from your page thus -
<script language="JavaScript1.2" src="MY.js"type="text/javascript"></script>



Show - hide

1. What is JavaScript?



JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

2.

Difference betwen Java & JavaScript?



Java is completely different from JavaScript- the former is a compiled language while the latter is a scripting language.

Display

3. What is DHTML?


DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.



Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'HEAD' of your page.




Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'BODY' of your page.




More information
This script works with virtually any content on your page to make them contractible. We deliberately made the HTML code in Step 2 very simple to illustrate the basic syntax required. The two steps required are:


1) Create the header that will expand a content when clicked on. Here's an example:


<h3

onClick="expandcontent('sc1')"

style="cursor:hand; cursor:pointer"> What is JavaScript?</h3>


The part in red is the ONLY required portion- everything else you can customize, from the header's style to even the tag used (ie: <img> instead of <h3>).


2) Specify the content that will be associated with the above and become expandable:


<div

id="sc1" class="switchcontent"

> JavaScript is a scripting language originally developed by Netscape..... </div>


Once again, the portion in red are required within the content. The ID attribute used above (ie: sc1) can be arbitrary, but MUST match the "sc1" specified within the header of step 1). This is so the header knows which content it should expand- it's not physic you know! Now, feel free to swap the <DIV> tag used to surround your content with a different tag, such as <span>, <p> etc.


Behaviour can be modified at start of script ("var enablepersist" and
"var collapseprevious"


One final thought. When the page first loads, by default all of the participating content are contracted until the user starts clicking on the headers. If you wish to make a particular content be visible from the start, you can use the CSS "display" property to accomplish this:


<div id="sc1" class="switchcontent" style="display:block"> </div>


And that's it. As you can see, the script is extremely adaptable, and you shouldn't' have a problem integrating it with all sorts of different content on your page.