How do I make instructions appear at the user's request?

I need to provide information for various clients when they log in to build a profile. I will be using HTML and Javascript for this purpose. What I would like is a concise set of instructions followed by an option to show more detailed instructions. If the client chooses to see the more detailed instructions, the field (ideally) expands to show more content.

Other ideas that achieve a similar result are also welcome, as are comments that simply point me in the right dire开发者_如何转开发ction. Preliminary research hasn't turned up much for me; I imagine this is largely due to being a novice and not knowing what to look for. Is this a conditional visibility issue, or is that something else entirely?

Many thanks for any help.

Place the hidden content in a separate container element with its display initially set to none. Then, add an onclick handler to a link that shows the content. That handler should set the display value to block or inline. Here is one way to do it (there are many). Set up your HTML something like this:

<p>
    [Instruction text here] 
    <a href="#" onclick="expandContent(this)">more ...</a><span class="more">
    [Additional content here]</span>
</p>

Some CSS to initially hide the additional content:

.more
{
    display: none;
}

Create your expandContent() function:

function expandContent(link)
{
    link.nextSibling.style.display = "inline";
}