0
316
ViewsUnfolding div transformation effect
I have a list of users - approved and awaiting approval. To that I need to add the button at the bottom that unfolds the list of archived users - on top of the approved/awaiting approval lists. It should give the transition like collapsible component - folding/unfolding the div on top of the previous one. And I don't know where to start. The most obvious thing to do is:
<div class="approved_users">
</div>
<div class="archive" style="display: none">
</div>
<button type="button" id="show_archive" onclick="myFunction()">Show archive</button>
function myFunction() {
var archive = document.getElementById("archive");
var app = document.getElementById("approved_users");
if (archive.style.display === "none") {
archive.style.display = "block";
app.style.display="none";
} else {
archive.style.display = "none";
app.style.display="block";
}
}
But I do not know how to achive the "unfold" transformation effect.Could you help?
1 answers
Answer question0
The folding effect on hover is actually fairly simple. For the HTML, all you need to add is a button in a navbar, as well as a list with the items (in your case, the approved accounts and waiting approval accounts).
<nav>
<li class="hov">Approved Accounts
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
</ul>
</li>
</nav>
The bulk of this effect, though is in css. I demonstrate the effect for you in this demo (HTML and CSS only):
ul,li{
margin: 0;
padding: 0;
}
.main{
position:absolute;
z-index:1;
}
.main li{
list-style:none;
background: blue;
width:100px;
padding: 0 5px;
border: 1px solid black;
height: 30px;
line-height: 30px;
-webkit-transition: all .5s ease-in-out;
}
.main li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(-90deg);
}
.main li:nth-child(even){
margin-top:-65px;
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(90deg);
}
.hov:hover li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.hov:hover li:nth-child(even){
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(0deg);
margin-top:0;
}
.main li:first-child{
margin-top:0;
}
.hov{
position:relative;
height: 40px;
width:112px;
background: green;
color: white;
font-size: 13px;
font-family: Helvetica;
font-weight:bold;
text-align: center;
line-height: 40px;
list-style:none;
z-index:2;
}<nav>
<li class="hov">Approved
<ul class="main">
<li>Crystal Bell</li>
<li>Frederick Adams</li>
<li>Add</li>
<li>More</li>
<li>To</li>
<li>This</li>
<li>List!</li>
</ul>
</li>
</nav>As you can see here, this css code works for any number of list items, so you can use it for any number of approved accounts you have. In your case, though, you should create many of these buttons for your other types of accounts (awaiting accounts).