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.