jquery toggle not working correctly in fancybox

Question

I have a toggle function which is defined to show/hide a div when some an item is clicked. this function is being called in a fancybox. the first time that fancy is called an load every thing is normal an correct, by when i close the fancy an reopen it, and the click the item, the item that should be showed is being twinked(show and hide)..

i tried these codes:

jQuery(document).on("click", ".add", function(){
    var selector = $(this).attr('data-descriptor');
    var $t = $('#field_'+selector);

    if ($t.is(':visible')) {
        $t.slideUp();
    } else {
        $t.slideDown();
    }
});

---

and this:

jQuery(document).on("click", ".add", function(){
    var selector = $(this).attr('data-descriptor');
    $('#field_'+selector).slideToggle('slow');
});

I can't understand what is the problem!?

special thanks to anyone who can give me some help :)

======= Edited:

fancy initialization:

    $('.fancybox').fancybox({
        /*maxWidth  : 1000,
        maxHeight   : 600,*/
        fitToView   : false,
        width   : '80%',
        height  : '60%',
        autoSize    : true,
        openEffect  : 'fadeIn',
        closeEffect : 'fadeOut',
        scrolling   : 'no',
        helpers:  {
            title  :  {
                type : 'inside'
            },
            thumbs : {
                width: 50,
                height: 50
            },
            overlay : {
            css : { 
                'overflow' : 'hidden' ,
                'background' : 'rgba(255,255,255,0.5)'
            }
            }
        }
    });

html code

<li id="coreValues_wrapper">
<span data-id="4" data-descriptor="coreValues" id="label_coreValues" class="add coreValues">
core values
</span>
<div style="display:none;" data-id="4" data-descriptor="coreValues" id="field_coreValues" class="coreValues">
<textarea id="value_coreValues" required="required" maxlength="300" class="input-block-level data"></textarea>
</div>
</li>