Unfolding div transformation effect

Question

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?

Here is a clean solution, [Add CSS3 transition expand/collapse](https://stackoverflow.com/questions/11514242/add-css3-transition-expand-collapse) — alechristopher, Mar 02 '22 at 18:08

score 1 · Answer 1 · edited Mar 02 '22 at 18:16

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).

Sorry, but that is not really an answer I was looking for. I haven't asked about the unfolding effect on hover on list item but about the unfolding effect when clicking on the button - there is no new content but rather one replacing another. So that's not really the case. But thank you for your time anyway! — Malvinka, Mar 08 '22 at 10:42
@Malvinka But upvoting is for effort put in, while accepted answer is for a correct solution — Halo, Mar 09 '22 at 18:13

Unfolding div transformation effect

1 Answers1