Menu
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 -->
967
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 -->If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
