Code: Select all
<script type="text/javascript">
function showDiv() {
if (document.getElementById('job-application').style.display == 'block') {
document.getElementById('job-application').style.display = 'none';
document.getElementById('job-application').style.transition = 'display 0.2s';
} else {
document.getElementById('job-application').style.display = 'block';
}
if (document.getElementById('applicationbutton').style.display == 'none') {
document.getElementById('applicationbutton').style.display = 'block';
document.getElementById('applicationbutton').style.transition = 'display 0.2s';
} else {
document.getElementById('applicationbutton').style.display = 'none';
}
}
</script>
<div class='job-left-apply' id='applicationbutton'><a
onClick=\"showDiv();\"
>Apply Now</a></div>
<div id='job-application'>
<div class='job-left-apply' style='background-color: #153878;'><A>Enter some Info</a></div><br/>
To apply for this role, please enter your covering letter/note to explain why you are suitable for this role. Your CV will automatically be applied with this note.
<form>
<textarea name='description'></textarea><br/>
<input type='submit' value='Submit Application'>
</form>
</div>
But I dont' want it to just be "on/off".. I want it to fade. So am trying to use the getElementById to do that.
I can make it appear, not appear, but the transition isn't working. Any ideas why?