Appear and Disappearing Elements

[totheletter]

I've read a number of tutorials and just can't seem to figure it out. I have a input form element that is hidden on page load, but appears on click. The problem I'm coming across is making it hidden again.

As of now, when you click 'Click to type your name' the input form appears as shown in the picture, but there is no way to make it disappear again.

My goal is this: On click, when the input form appears I'd like the 'Click to personalize your own' to change to 'Show me my word!'. I'd also like to add a 'Cancel' text/button link directly above the input field that when clicked, both the input field and 'cancel' text link disappear and the 'Show me my word!' goes back to 'Click to personalize your own'.

Input Field Code

<input class="name" type="text" name="word" maxlength="11" value="click and type" onfocus="value=''" />

^^CSS Code for input field has 'display:none' property

'Click to Personalize your own' Link Code

<input type="button" value="click here to personalize your own" id="showHiddenBlock" />

Script to Make it appear and disappear

<script>
$(document).ready(function() {
2
    $('#showHiddenBlock').click(function() {
3
        $('.name').show();
4
    });
5
});
</script>

I've also attempted to add some CSS3 transition effects to make it fade in and out rather than just appear/disappear but no luck. Any help would be greatly appreciated.

 

[chrishirst]

// get a reference to the element
var eVis= getElementById('id').style.visibility;

//to hide
eVis = "hidden";

//to show
eVis = "visible";

Why do you need a huge amount of extra code to do something so simple?

 

[totheletter]

I'm not to knowledgable about making elements appear and disappear so the coding I have I took from an online tutorial.

But what I'm looking to do is click a link and have that link itself disappear and a new one appear, can this be achieved with that coding. If so, can you show me a simple example.

 

[CaldwellYSR]

Your code would look like...

<script>
$(document).ready(function() {
    $('#showHiddenBlock').click(function() {
        $('.name').show();
        $('#newButton').show();
        $('#showHiddenBlock').hide();
    });
});
</script>

 

[totheletter]

CaldwellYSR, thank you, that is exactly what I was trying to accomplish. Do you have any ideas on how to make the elements fade or transition rather than just appear/disappear?

 

[chrishirst]

lmgtfy.com/?q=menu+fade+out

 

[ronaldroe]

Another option: jQuery's .toggle() function.

 

[benjamin.morgan]

You could add in hide and show or toggle and make it come in slow like this.

$('#whatever').toggle("slow");
$('#whatever1').hide("slow");
$('#whatever2').show("slow");

 

[PixelPusher]

Another option: jQuery's .toggle() function.

I agree with Ronald, better option IMO.

 

[totheletter]

Got it! Thanks everyone for your help, the fadeIn and fadeOut function accomplished exactly what I wanted as for transition effects