HTML+CSS+JavaScript

У меня из базы в теги input выводятся все характеристики заметок!
Чтобы страница не была сильно громозкой я хочю сделать так


Заголовок: +
Текст:+

Где знак + есть та самая картинка по нажатию которой появляется элемент input на странице!
И так далее для остальных
Как такое сделать?
Код таков:
<input type=text name=title value=Текст из базы>
<textarea name=text>Из базы</textarea>
и тд около 10 таких элементов форм)))

<form name="myForma235"> ... <img src="адрес_картинки_с_плюсиком" onclick="with (document.forms.myForma235) {text101.style.visibility = 'visible'; title101.style.visibility = 'visible'} this.style.visibility = 'hidden';"> ... <input type="text" name="title101" value="Текст из базы" style="visibility: hidden"> <textarea name="text101" style="visibility: hidden">Из базы</textarea> ... </form>

Аналогично и для следующих пар элементов.

PS. Никогда не давайте именам и идентификаторам значения, которые уже и так
являются свойствами или объектами документа: text - это свойство многих-многих
тегов, title - это объект документа. В английском языке вполне досточно букв (кроме
того, имеются ещё десять арабских цифр), чтобы дать всем переменным (именам,
идентификаторам, классам,..) уникальные и НИГДЕ НЕ ПОВТОРЯЮЩИЕСЯ значения.

Зачем путать не только браузер, но и самого себя (если вдруг придётся через какое-то
время вникать в давно написанный код, чтобы его исправить/доработать)?

Спасибо за пример-работает!
Можно сделать так, чтобы по второму нажатию по картинке все элементы формы сворачивались в первоначальное положение?

<script type="text/javascript">
function show(id){
el=document.getElementById(id);
el.style.display=(el.style.display=='none')?'inline':'none';
}
</script>

<form name="myForma235">
...
<img src="адрес_картинки_с_плюсиком" onclick="show('ss')">
...
<span id='ss' style="display:none;">
<input type="text" name="title101" value="Текст из базы">
<textarea name="textfield" id="textfield">ssss</textarea>
</span>
...
</form>

Можно.
Только для этого вам надо иметь ДВЕ картинки - одну "с плюсом", вторую - "с минусом".

<img src="plus.gif" onclick="s = (this.src.indexOf ('plus.') > 0); with (document.forms.myForma235) {text101.style.visibility = (s) ? 'visible' : 'hidden'; title101.style.visibility = (s) ? 'visible' : 'hidden'} this.src = (s) ? 'minus.gif' : 'plus.gif';">

*Если картинки будут лежать не в той же директории, что и исходный файл, то вполне можете прописать путь у ним:

<img src="bla-bla/plus.gif" onclick="s = (this.src.indexOf ('plus.') > 0); with (document.forms.myForma235) {text101.style.visibility = (s) ? 'visible' : 'hidden'; title101.style.visibility = (s) ? 'visible' : 'hidden'} this.src = (s) ? 'bla-bla/minus.gif' : 'bla-bla/plus.gif';">

Подскажите, как будет это всё выглядеть, если мне не текст надо выводить а несколько фоток.