Question

I have a textarea and it doesn’t hide using Firefox 12 but it does hide in IE9 and Chrome.

The textarea has a button that when I click this button it will automatically show the textarea.

here’s my code.

<div id="data">
    <div id="data-inner">
        <i>Loading...</i>
    </div>

    <fieldset id="standalone-data-set">

        <div>
            <textarea id="standalone-data" name="standalone-data"></textarea>
        </div>

        <div class="clearfix"-->
            <input id="save-data" class="data-button" type="button" value="Confirm" />
            <input id="cancel-data" class="data-button" type="button" value="Cancel" />
        </div>

    </fieldset>

    <input id="add-data" class="data-button" type="button" value="Add Data" />
</div>

Here’s my CSS code

#standalone-data-set {height: 0px; overflow: hidden;}
#standalone-data {margin: 0 !important; height: 200px !important; width: 880px !important;} input.data-button {font: 100%/25px Tahoma, Verdana, Trebuchet MS, Sans-Serif; float: left !important; margin: 15px 20px 0 0 !important; width: auto !important; padding: 0 20px 2px 20px; height: 25px;}
#add-data {float: none !important;}


<script language=javascript>
$('#save-data').click(function() {
var data = $('#standalone-data').val();
$('input[type=submit], input[type=button]').attr('disabled', 'disabled');
$.post($.getAjaxUrl('userAction', 'CreateRequestData', { 'requestDataID' : data.requestDataID }), { 'data' : data }, function(data) {
data = $.parseJSON(data);
if (data.error == true) {
alert(data.response);
} else {
$('#cancel-data').click();
$('#data-inner').getRequestData(data.requestID);
}
$('input[type=submit], input[type=button]').attr('disabled', '');
});
return false;
}); 


$('#cancel-data').click(function() {
if ($.client.os != 'an unknown OS') {
$('#standalone-data-set').animate({
height: '0px'
}, 100, function() {
$('#add-data').show();
});
return false;
} else {
$('textarea#standalone-data').val('');
}
});

$('#add-data').click(function() {
$('#add-data').hide();
$('#standalone-data-set').animate({
height: '290px'
}, 100, function() {
if (data.CEditor == undefined) {
data.CEditor = $('textarea#standalone-data').tinymce(data.EditorsConfig);
}
$('textarea#standalone-data').val('');
});
return false;
});  
</script>

Hope anyone can shed a solution on how to make the textarea hide. thanks a lot.

Answer 1

You can try to wrap textarea in a div and hide that div instead.