Use CSS to fade a Div in and Out with Transition?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4434
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Use CSS to fade a Div in and Out with Transition?

Post by simonmlewis »

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>
I have a Job page, with an Apply button. When they click it, the DIV containing that button disappears and a DIV with "Enter details here" and a form appears.

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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
lindseynicole
Forum Newbie
Posts: 4
Joined: Mon Oct 05, 2015 2:11 am

Re: Use CSS to fade a Div in and Out with Transition?

Post by lindseynicole »

#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}​
Post Reply