hide show div using javascript css

Question

I want to slowly hide or show my div . what should be the logic in script bellow .When i clicked the button,existing div hiding and another div showing. would anyone please answer.Here is my code snippet.

  function myFunction() { var x = document.getElementById('before-e'); var y = document.getElementById('after-e'); if (x.style.display === 'none') { x.style.display = 'block'; } else { y.style.display = 'block'; x.style.display = 'none'; } } 

 .favorites-right-before-expand { background-color: #5642BE; color: #fff; height: 155px; width: 106px; margin-left: -8px; } .matched-body { padding-top: 40px; } .per { margin-bottom: -8px; } .prog-percent { margin-left: 9px; font-size: 16px; } .prog-percent { margin-left: 9px; font-size: 16px; } .my-progress { height: 10px; margin-bottom: 0px; border-radius: 0px; margin-left: 9px; margin-right: 15px; } .favorites-right-before-expand button { color: #D6DA22; font-size: 8px; text-decoration: underline; margin-left: 2px; background: none; border-style: none; } .per { margin-bottom: -8px; } .prog-percent-after { margin-left: 21px; font-size: 16px; } .prog-percent-after { margin-left: 21px; font-size: 16px; } .my-progress-after { height: 10px; margin-bottom: 0px; border-radius: 0px; margin-left: 21px; margin-right: 42px; } .expand ul { list-style: none; color: #D6DA22; font-size: 10px; margin-left: -17px; position: relative; margin-top: 7px; } .favorites-right { background-color: #5642BE; color: #fff; height: 180px; width: 142px; padding-top: 13px; } 

 <div class="favorites-right" style="display: none;" id="after-e"> <div class="prog-percent-after per">80%</div> <div class="prog-percent-after"> MATCHED</div> <div class="progress my-progress-after"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> </div> </div> <div class="expand"> <ul> <li> You both do not smoke</li> <li> You both live in Bangldesh</li> <li> Ridhika seems to like photography</li> <a href="#" style="color: #D6DA22;font-size: 10px;text-decoration: underline;">See more>></a> </ul> </div> </div><!-- end favorites-right--> <div class="favorites-right-before-expand" id="before-e"> <div class="matched-body"> <div class="prog-percent per">80%</div> <div class="prog-percent"> MATCHED</div> <div class="progress my-progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> </div> </div> <button onclick="myFunction()" class="expand_button">Expand Categories>></button> </div><!--end matched-body--> </div><!-- end favorites-right-before-expand --> 

Answer 1

I think that you are making this harder on yourself than you need to be. Assuming that you are using jQuery you can easily just do the following.

function toggleDivs () {
  $('#after-e').toggle();
  $('#before-e').toggle();
}

The toggle function will display or hide the elements based on their current state in the dom.

Answer 2

If you want to fade one element out, then fade in another one after the animation has completed, you can pass in a function into the second parameter of the .fadeOut function. In this function, you .fadeIn the second element.

Here's an Example

500 is the delay in milliseconds

$('#first-element').fadeOut(500, function() {
    $('#second-element').fadeIn();
});

The example in your code

 function myFunction() { $('#before-e').fadeOut(500, function() { $('#after-e').fadeIn(); }); } 

 .favorites-right-before-expand { background-color: #5642BE; color: #fff; height: 155px; width: 106px; margin-left: -8px; } .matched-body { padding-top: 40px; } .per { margin-bottom: -8px; } .prog-percent { margin-left: 9px; font-size: 16px; } .prog-percent { margin-left: 9px; font-size: 16px; } .my-progress { height: 10px; margin-bottom: 0px; border-radius: 0px; margin-left: 9px; margin-right: 15px; } .favorites-right-before-expand button { color: #D6DA22; font-size: 8px; text-decoration: underline; margin-left: 2px; background: none; border-style: none; } .per { margin-bottom: -8px; } .prog-percent-after { margin-left: 21px; font-size: 16px; } .prog-percent-after { margin-left: 21px; font-size: 16px; } .my-progress-after { height: 10px; margin-bottom: 0px; border-radius: 0px; margin-left: 21px; margin-right: 42px; } .expand ul { list-style: none; color: #D6DA22; font-size: 10px; margin-left: -17px; position: relative; margin-top: 7px; } .favorites-right { background-color: #5642BE; color: #fff; height: 180px; width: 142px; padding-top: 13px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="favorites-right" style="display: none;" id="after-e"> <div class="prog-percent-after per">80%</div> <div class="prog-percent-after"> MATCHED</div> <div class="progress my-progress-after"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> </div> </div> <div class="expand"> <ul> <li> You both do not smoke</li> <li> You both live in Bangldesh</li> <li> Ridhika seems to like photography</li> <a href="#" style="color: #D6DA22;font-size: 10px;text-decoration: underline;">See more>></a> </ul> </div> </div><!-- end favorites-right--> <div class="favorites-right-before-expand" id="before-e"> <div class="matched-body"> <div class="prog-percent per">80%</div> <div class="prog-percent"> MATCHED</div> <div class="progress my-progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> </div> </div> <button onclick="myFunction()" class="expand_button">Expand Categories>></button> </div><!--end matched-body--> </div><!-- end favorites-right-before-expand --> 

Answer 3

You can add these lines to your code in order to get it through CSS.

.favorites-right-before-expand {
    background-color: #5642BE;
    color: #fff;
    height: 155px;
    width: 106px;
    margin-left: -8px;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}

Answer 4

Try adding

(yourvariable).style.display = "block";

then add the css:

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;
    }
}

then,

.yourdiv {
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s; 
}