I am looking for a way to show/hide a div up and down, but I have some requirements:
- I cannot use jQuery: toggle(), slideToggle(), fade, animate, etc. all use display: none, and I need the div to still occupy space in the DOM (I will be processing things there).
So far, I have only been able to change the visibility of the div from hidden to block by clicking a "Toggle" button. It works fine, but I would like to add some effects to the display, similar to what toggle('slow') does.
Here is my CSS:
.show, .show * {
visibility: inherit !important;
}
.hide, .hide * {
visibility: hidden !important;
}
This is my React/JS code:
toggleCharts:function(){
//$("#chartBox").toggle();
if (this.state.className === 'hide')
this.setState({className: 'show'});
else
this.setState({className: 'hide'});
}
And here is the div that needs to be hidden:
<div id="chartBox" className={this.state.className}></div>