Hi folks.
I would like to make my forms a little more functional - by having
some "instruction" text that can be toggled visible/invisible.
- - - - - - - - - - - - - - - - - - - - - - - - -
I have the following code;
<script type="text/javascript">
$(document).ready(function(){
$('.noshow').hide();
$('a.toggle').click(function()
{
$(this).next('span').toggle('fast');
return false;
}
);
});
</script>
++++
<p>
<a href="#" class="toggle" title="Click for more
information.">Details<span class="detailsimage"></span></a>
<span class="noshow">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in
leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut
semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla
accumsan nonummy. Phasellus tristique purus quis nibh. Donec
adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam
erat volutpat. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. In ut justo. Nulla libero.
</span>
</p>
- - - - - - - - - - - - - - - - - - - - - - - - -
As you can see, it's not exactly perfect.
The <a><span><span>NNN</span></span> is so that I can use and image
over the top of the "Details" text.
The problem is that I cannot get the above to work with the following
setup;
<p>
<label></label>
<a>
<span><span>
NNN
</span></span>
<input />
<span>
Instructions
</span>
</p>
I really want that "link" inbetween the label and the input, and the
instruction text to appear beneath it all.
I also have multiple inputs, and would prefer something that could
"self-relate" (rather than haivng to make tons of code with individual
id's).
- - - - - - - - - - - - - - - - - - - - - - - - -
I hope all of that makes sense, and someone/s can help.
Much appreciated.
