Hide div display using javascript css
I want to slowly hide or show my div. which should be the logic in the script below. When I clicked on the button, the existing div hide and another div show. somebody 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 -->
source to share
I think you are making this more difficult for yourself than you need to. Assuming you are using jQuery, you can simply do the following.
function toggleDivs () {
$('#after-e').toggle();
$('#before-e').toggle();
}
The function shows or hides elements based on their current state in the dom.
source to share
If you want to wipe out one element and then disappear into another after the animation finishes, you can pass a function in the second parameter of the function .fadeOut
. In this function, you are the .fadeIn
second element.
Here's an example
500 is the delay in milliseconds
$('#first-element').fadeOut(500, function() {
$('#second-element').fadeIn();
});
Example in 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 -->
source to share