"show/hide" a div with javascript not jquery, and not with display:none

Question

I need to show/hide up and down a div, but:

• It can't be with jquery: because, togle(), slideTogle(), fade, animate, etc, they all use display:none, and I need the div using it space in the DOM (I'll be procesing things there).

Til now, I only made that divs get the style visibility: hidden and block, by clickin some "Toggle" button, it works ok, but I don't know how to add some effect on the display, like togle('slow') does.

My CSS:

.show, .show * {
    visibility: inherit  !important;
}

.hide, .hide * {
    visibility: hidden !important;
}

My React/js:

toggleCharts:function(){
    //$("#chartBox").toggle();
    if (this.state.className === 'hide')
        this.setState({className: 'show'});
    else
        this.setState({className: 'hide'});
}

The Div to hide:

<div id="chartBox" className={this.state.className}></div>

Answer 1

Keep your React/jQ as-is, but show and hide your elements with CSS transitions, like fading with opacity:

.show {
    opacity: 1 !important;
    transition: opacity .5s;
}

.hide {
    opacity: 0 !important;
    transition: opacity .5s;
}

Answer 2

try : $('#chartBox').animate({opacity : 0}, 500);