Hide/show elements of a form when the user hit a link

i have a form with some input texts and radio buttons, i want to show when the user hit a hyperlink some other elements of the form, and when the user hit again, hide them. How can i do this? I think jquery will do the think, but im not a javascript developer开发者_运维问答 so i need some orientation, Thanks a lot!

Here's an example. If you have the html below:

<p>Click on the gray 'button' below.</p>
<div id="ThingOne">
    Hi, I'm thing one!
    <div id="ButtonOne" style="background-color: Gray; width: 100px">Show Thing Two</div>
</div>

<div id="ThingTwo">
    Hello, I'm thing two!
    <div id="ButtonTwo" style="background-color: Gray; width: 100px">Show Thing One</div>
</div>

Then you can use the jquery below.

<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#ButtonOne").click(function () {
            $("#ThingTwo").fadeIn("slow");
            $("#ThingOne").fadeOut("slow");
        });

        $("#ButtonTwo").click(function () {
            $("#ThingOne").fadeIn("slow");
            $("#ThingTwo").fadeOut("slow");
        });

        $("#ButtonOne").click();

    });

</script>

Note the call to .click(), which hides the ButtonTwo div upon first execution. Also, you'll need update the reference to a JQuery library as appropriate. Hope this helps!

You need something like this:

$("#linkid").click(function() {
     $("#togglediv").toggle()
})

And you probably want to put href='#' into the <a > tag, too.

Alternatively, you could do something like this:

$("#linkid").toggle(function(event) {
      event.preventDefault()
      $("#togglediv").show()
}, function(event) {
      event.preventDefault();
      $("#togglediv").hide()
})

This has the advantage that you can call other JS processing on a show or hide that might be specific to a show or specific to a hide, such as changing the link's text.

If this is your hyperlink: <a id="hideshowlink">Link</a>

Bind the hyperlink to a click event and then hide or show the elements you want in there. So $('input:radio').toggle(); will hide or show all radio buttons based on their current state (ie. if they are hidden, then show and vise versa).

$(document).ready(function() {
        $('#hideshlowlink').click(function() {
          $('input:radio').toggle();
          $('#idofelementsToHideShow').toggle();
        });
});

If you have all these elements in a div or some container, then just toggle the container inside the click event. Otherwise, you can toggle each element by itself.