how to hide content, but show it on click

So I have this code:

<script type="text/javascript">
$(document).ready(function() {
$('.rm_color').each(function() {
    var divPicker = $(this).find('.colorpicker');
    var inputPicker = $(this).find('input[type=text]');
    divPicker.hide();
    divPicker.click(function(){divPicker.farbtastic(inputPicker)});
    }); 
});
</script>

My intention was to hide the farbtastic feature, but when the use doubleclick the textarea input, the farbstastic feature shows up. And when user double开发者_StackOverflow中文版click it again, the farbstastic goes hidden.

How to crate the proper code using the above code? Many thanks

UPDATED! with the answer:

I've found the answer:

<script type="text/javascript">
    $(document).ready(function() {
        $('.rm_color').each(function() {
            var divPicker = $(this).find('.colorpicker2');
            var inputPicker = $(this).find('input[type=text]');     
            divPicker.hide();
            divPicker.farbtastic(inputPicker);
            inputPicker.dblclick(function(){divPicker.slideToggle()});
        });
    });
</script>

Here's the modified code if you're taking the original declaration script from the farbtastic official website.

http://acko.net/dev/farbtastic

<script type="text/javascript">
    $(document).ready(function() {
    $('#colorpicker4').hide();
    $('#colorpicker4').farbtastic('#color4');
        $('#color4').dblclick(function(){$('#colorpicker4').slideToggle()});
     });
</script>

http://api.jquery.com/dblclick/

<script type="text/javascript">
var isOpen = false;
$(document).ready(function() {
$('.rm_color').each(function() {
    var divPicker = $(this).find('.colorpicker');
    var inputPicker = $(this).find('input[type=text]');
    divPicker.hide();
    divPicker.dblclick(function(){
if(isOpen){
//close
isOpen = false;
}else{
divPicker.farbtastic(inputPicker)
isOpen = true;
}
});
    }); 
});
</script>

Try this

<script type="text/javascript">
$(document).ready(function() {
$('.rm_color').each(function() {
    var divPicker = $(this).find('.colorpicker');
    var inputPicker = $(this).find('input[type=text]');
     divPicker.hide();
     inputPicker.dbclick(function(){ divPicker.toggle(); if(divPicker.is(":visible")){                  
       divPicker.farbtastic(inputPicker);}
     });
    }); 
});
</script>

I've found the answer:

<script type="text/javascript">
    $(document).ready(function() {
        $('.rm_color').each(function() {
            var divPicker = $(this).find('.colorpicker2');
            var inputPicker = $(this).find('input[type=text]');     
            divPicker.hide();
            divPicker.farbtastic(inputPicker);
            inputPicker.dblclick(function(){divPicker.slideToggle()});
        });
    });
</script>

Here's the modified code if you're taking the original declaration script from the farbtastic official website.

http://acko.net/dev/farbtastic

<script type="text/javascript">
    $(document).ready(function() {
    $('#colorpicker4').hide();
    $('#colorpicker4').farbtastic('#color4');
        $('#color4').dblclick(function(){$('#colorpicker4').slideToggle()});
     });
</script>