Question

I have a form which has multiple input fields, and 3 main options. depending on what option the user selects I want to be able to hide non relevant fields and show relevant ones. please can some one advice me on how I may achieve this.

my second question is each field has some examples text next to it, so once again I want to be able to change the text depending on what the user selects. so far what i have done is display each text in a <p> tag next to the field and I have given it two classes. one is static which styles the text (.htxt) and the other is either .option1 .option2 .option3. so when a user clicks option one i want to hide all option2 and 3 text and show only 1. so i have something like this so far

    $(".link").click(function () {
        $(".hTxt").hide("slow");
        // this gets the id of the link (option 1, option2, option3)
        target = $(this).attr("id");
        $(".hTxt ." + target).show("slow");
    });

this doesn’t seem to work, I was wondering if any one could help me out with this.

the html for one of the text looks like so

<p class="hTxt option1" >help me</p>

while the link calling it looks like so

<a class="link" id="option1">this is option1</a>

Answer 1

you are saving an id but selecting a class with it; try like this instead

$(".link").click(function () {
        $("#.hTxt").hide("slow");
        // this gets the id of the link (option 1, option2, option3)
        target = $(this).attr("id");
        $(".link #" + target).show("slow");   /* #id VS .class */
    });

and here you do a mix: $("#.hTxt").hide("slow");

if its a class-> $(".hTxt").hide("slow");

if its an id -> $("#hTxt").hide("slow");

-EDIT-

i Am guessing by your comment that hTxt is a class, so please try like this and let me know

$(".link").click(function () {
        $(".hTxt").hide("slow");
        // this gets the id of the link (option 1, option2, option3)
        target = $(this).attr("id");
        $(".link #" + target).show("slow");   
    });