I have a hidden div #about. By clicking on the #clickme link, the div becomes an invisible function. Unfortunately, CSS transition (opacity) does not work, although it should contain both .hide and .unhide classes, including transitions. Any ideas?
HTML
<li><a id="clickme" href="javascript:unhide('about');">click me</a></li> <div id="about" class="hide"> <p>lorem ipsum …</p> </div>
CSS
.hide { display: none; -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; opacity:0; } .unhide { display: inline; opacity:1; }
SCRIPT
<script> function unhide(divID) { var element = document.getElementById(divID); if (element) { element.className=(element.className=='hide')?'hide unhide':'hide'; } } </script>
source share