how to hide content, but show it on click

Question

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 doubleclick 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>

Answer 1

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>

Answer 2

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>

Answer 3

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>