CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user8481077
user8481077

Reputation:

Page/Div Content fade in and out on click

I have been working on my recruiting website for some days now. I am a newbie in programming. Please I need script that will load the Employment review content fade out on click of of each employment vacancy div and fade in on clicking "close" on the Employment review content page. Thanks.

Employment Vacancy Page Employment Vacancy Listing

Upvotes: 0

Views: 229

Answers (2)

zloctb
zloctb

Reputation: 11177

    #start{
        height:100px;
        width:300px;
        border:3px solid red;
        display: none;

    }
    #start.fadeIn{
        display: block;
        animation-name:fadein;
        animation-duration:3s;
    }
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

document.getElementById('run').addEventListener('click',function(){
        document.getElementById('start').classList.toggle('fadeIn');
    })


<div id="start" class="rotating">
            some text  some text  some text  some text  some text
    </div>

Upvotes: 0

Gabriel Mesquita
Gabriel Mesquita

Reputation: 2391

You can use jquery to achieve that like this: http://api.jquery.com/fadeout/

$( "#vacancy-div-id" ).click(function() {
  $( "#id-of-what-you-want-to-fade-out" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

To fade in you can use this: http://api.jquery.com/fadein/

$( "#close-button-id" ).click(function() {
  $( "#id-of-what-you-want-to-fade-in" ).fadeIn( "slow", function() {
    // Animation complete
  });
});

More detailed example - Put this in your html:

<script>
    $( "#close-button-id" ).click(function() {
      $( "#id-of-what-you-want-to-fade-in" ).fadeIn( "slow", function() {
        // Animation complete
      });
    });
</script>

If you do not know the id of what you want to be click to trigger the fadeIn animation, you can right click on the element and click inspect, it will show to you the html of your page.

Upvotes: 1

Related Questions