Looking for something specific:
How can I create a button that triggers a script and then, when the script is done, reverses the action (toggles)?
(I am currently learning javascript/jquery, so I am a beginner in this field)
Here's an example:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate(
{height: '250px'},
function(){ $("#hidden_txt").fadeIn(1000); } );
});
});
</script>
<button>Start</button>
<div style="background:#98bf21; height:100px; width:100px; position:absolute;">
<span id="hidden_txt" style="display: none">Hey, just checking !</span>
</div>
I have solved it using CSS class toggle, but:
- When closing, the CSS classes must be deactivated in reverse order, first fading out and then returning the div to 100px height
- CSS transitions do not work in IE9 and IE8 :/
(jQuery 1.12.4)