Using jQuery to unhide a div by clicking on a link

Question

for this I am using colorbox jQuery plugin http://colorpowered.com/colorbox/ and a form. I am trying to use jQuery colorbox to unhide a div containing a form and show it in the colorbox when I click on the relevant links below.

This is the javascript in the header I use:

$(document).ready(function() {
    $('#password_reset').ajaxForm({
        success: showResponse,
        clearForm: 'true'
    });

    function showResponse(responseText, statusText) {
        $('#password_reset').hide();
        $('#formStatus').html(responseText);
    };

    $().bind('cbox_open', function() {
        $('#password_reset').show();
        $('#formStatus').html('');
    });

    $(".inline").colorbox({
        width: "300px",
        height: "250px",
        inline: true,
        href: "#password_change"
    });
});

This is the link I have that is supposed to run my javascript code (above) and unhide the div below and run it into colorbox:

<a href="javascript:showResponse">Password Reset</a>

This is my hidden div:

<div style="visibility: hidden;">
    <div id='password_change' style="padding:10px; background:#fff;">
        <strong>Change your password</strong><br /><br />
        <form id="password_reset" action="password_reset.php" method="post">
            <input type="hidden" name="Method" value="updatePassword"  />
            Password: <br />
            <input type="password" name="password1" />
            <br />
            <br />
            Verify Password: <br />
            <input type="password" name="password2" />
            <br />
            <input type="submit" value="Update" />
        </form>
        <div id="formStatus"></div>
    </div>
</div>

Hopefully someone can tell me how I can get this working as I am completely stuck and I know it's a small error I am making here but I can't figure it out. Please help?

Answer 1

griegs' answer is half way there. jQuery's show & hide on a div element is equivalent of display:block; and display:none; so it should be like this:

<div id="DIV_password_reset" style="display:none;">

$('#DIV_password_reset').show();

If you want to use visibility, do the following:

<div id="DIV_password_reset" style="visibility:hidden;">

$('#DIV_password_reset').css('visibility', 'visible');

Answer 2

<div id="DIV_password_reset" style="visibility: hidden;">

$('#DIV_password_reset').show();

Your setting the visibility of the form and not the div.

Answer 3

I think you need something like this using jQuery:

jQuery(document).ready(function(){
    jQuery('.show').live('click', function(event) {        
        $("#yourDivId").attr({style: "visibility: show;"});
    });
});​

Check on jsfiddle.net

More Info:

• Change Or Set HTML Tag Attribute Using JQuery
• jQuery .attr()