little folding triangles?

Question

Based on the style of the 'turning' triangle that opens up a sub menu. Say I had a form that had lender name address city.... how would I add extra section to that form for a second lender name address.... ?

Not many people are going to need this on my site but the one's that do, must have the extra fields. I would like to conceal the extra fields for the majority of the users. The ones that need the extra fields should be able to access them with one click. How would I do that?

Answer 1

Ah, I think you mean you want to have collapsible sections on your form.

In short:

1. Put the content you want to collapse in its own DIV, with the CSS property of "display:none" at first
2. Wrap a link (A tag) around the triangle image (or text like "Hide/Show") that runs the JavaScript to toggle the display property.
3. If you want the triangle to "turn" when the section is expanded/shown, you can have the JavaScript swap out the image at the same time.

Here's a better explanation: How to Create a Collapsible DIV with Javascript and CSS

Or if you Google search with words like "CSS collapsing sections" or such you will find many other tutorials, including super-fancy ones (e.g. http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

Answer 2

Your absolute most basic way of hiding/showing an element using JavaScript is by setting the visibility property of an element.

Given your example imagine you had the following form defined on your page:

<form id="form1">
    <fieldset id="lenderInfo">
     <legend>Primary Lender</legend>
     <label for="lenderName">Name</label>
     <input id="lenderName" type="text" />
     <br />
     <label for="lenderAddress">Address</label>
     <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
     <legend>Secondary Lender</legend>
     <label for="secondaryLenderName">Name</label>
     <input id="secondaryLenderName" type="text" />
     <br />
     <label for="secondaryLenderAddress">Address</label>
     <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

There are two things to note here:

1. The second group of input fields are initially hidden using a little inline css.
2. The "Add Lender" link is calling a JavaScript method which will do all the work for you. When you click that link it will dynamically set the visibility style of that element causing it to show up on the screen.

showElement() takes an element id as a parameter and looks like this:

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

Almost every JavaScript approach is going to be doing this under the hood, but I would recommend using a framework that hides the implementation details away from you. Take a look at JQuery, and JQuery UI in order to get a much more polished transition when hiding/showing your elements.