How can I reverse the order of div elements upside down on 'onclick'?

Question

I have the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>StackOverflow Question</title>
    <style>
    .container--wrap {
        background-color: #000000;
        border-radius: 15px;
        margin: 5px;
        overflow: hidden;
        justify-content: stretch;
        align-items: flex-end;
    }
    .scroller2{
        height: 250px;
        overflow-y: scroll;
    }
    .circle {
      position: relative;
      margin-bottom: 40px;
      height: 20px;
      display: flex;
      align-items: center;
    }

    .circle::before {
      content:"";
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .circle::after {
      position: absolute;
      content: '';
      left: 7.5px;
      top: 20px;
      width: 5px;
      background: #4d4d4d;
      height: 40px;
    }
    .minor::before {
      background-color: purple;
    }

    .major::before {
      background-color: red;
    }

    .gray::before {
      background-color: gray;
    }
    .tlbtn {
      background-color: #343434;
      border-radius: 10px;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      font-family: robotobold;
    }
    #tltitle,.tlbtn{
      display: inline-flex;
    }

    </style>
</head>
<body>

    <script>
    function btn1Click() {
        document.getElementById("btn1").style.backgroundColor="#5c5c5c";
        document.getElementById("btn2").style.backgroundColor="#343434";
    }
    function btn2Click() {
        document.getElementById("btn2").style.backgroundColor="#5c5c5c";
        document.getElementById("btn1").style.backgroundColor="#343434";
    }
    </script>
    <div class="container--wrap-scroll scroller2" id="timeline">
        <p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
        <div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
        <div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
        <div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
        <div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
        <div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
        <div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
    </div>
</body>
</html>

When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:

e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.

Is there a way I can do this?

Screenshot:

If you keep the `div` elements in an array, then all you have to do is reverse the array. — Scott Marcus, May 05 '20 at 22:40
well, Array.from(parent.childNodes).reverse() isn't really that big a deal — user120242, May 05 '20 at 22:43
You originally asked for flipping it upside-down... so I prepared this for you: https://jsfiddle.net/6xnhs84w/ :D — Isolin, May 05 '20 at 22:48
@ScottMarcus The answer referenced in the header contains solutions from almost 10 years ago. Danzinger's proposal is the up-to-date answer. Flexbox wasn't there in 2011! — Isolin, May 05 '20 at 22:55
I'll have to say, flexbox is probably my favorite solution to these things. flexbox was really a godsend. However, to be fair, it's still a dupe. You can always post it over there, and this one can still get upvoted and accepted. — user120242, May 05 '20 at 23:15
Moving my answer there as it's definitely relevant for that other question, but given that one was tagged as `jquery` but not as `css`, while this one has `css`... Not sure these two are duplicates if we consider that as part of the question. Might mean both OPs were asking for a solution for the same problem but using different technologies. — Danziger, May 05 '20 at 23:27
I guess you have a point. But, having these two linked together will push it up in search rankings with similar search terms, so it's mostly a win-win situation anyways. On another note, I'm noticing that search results on StackOverflow have been really bad lately. I remember many many years ago I could search for things and find answers quickly on SO. Now it's like even the simplest questions take me to a bunch of garbage results, and I have to dig to find the right ones. Wondering if it's just me getting out of touch with Google or something. — user120242, May 05 '20 at 23:48
@Isolin I think you meant to direct your comment to me at someone else. I made no reference to any answer, nor did I mention Flexbox. The simplest, most direct, and most compatible solution is what I suggested, keep the elements in an array and then reverse the array. — Scott Marcus, May 06 '20 at 00:09
@ScottMarcus I'm sorry, I thought you closed this question with the duplicate reference. Reading the above comments, user120242 has a point and I agree with him/her. — Isolin, May 06 '20 at 00:19

Danziger · Accepted Answer · 2020-05-05T23:13:17.113

If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:

const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');

newestButton.onclick = () => {
  timeline.classList.remove('timeline--oldest-first');
  timeline.classList.add('timeline--newest-first');
  oldestButton.classList.remove('button--selected');
  newestButton.classList.add('button--selected');
};

oldestButton.onclick = () => {
  timeline.classList.add('timeline--oldest-first');
  timeline.classList.remove('timeline--newest-first');
  oldestButton.classList.add('button--selected');
  newestButton.classList.remove('button--selected');
};

body {
  margin: 0;
  padding: 8px;
  font-family: monospace;
  font-size: 14px;
}

.header {
  display: flex;
  padding-bottom: 8px;
  margin-bottom: 16px;
  align-items: center;
  border-bottom: 2px solid black;
}

.title {
  margin-right: auto;
}

.button {
  font-family: monospace;
  font-size: 14px;
  border-radius: 2px;
  padding: 4px 8px;
  margin-left: 8px;
  cursor: pointer;
  border: 0;
  outline: none;
  border: 2px solid black;
  background: transparent;
}

.button--selected {
  background: yellow;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.timeline--newest-first {
  flex-direction: column;
}

.timeline--oldest-first {
  flex-direction: column-reverse;
}

.circle {
  position: relative;
  margin-bottom: 16px;
  height: 20px;
  display: flex;
  align-items: center;
}

.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
  margin-bottom: 0;
}

.circle::before {
  content:"";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 16px;
  border: 2px solid black;
}

.circle::after {
  position: absolute;
  content: '';
  left: 9px;
  top: 20px;
  width: 2px;
  background: #000;
  height: 16px;
}

.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
  display: none;
}

.minor::before {
  background-color: purple;
}

.major::before {
  background-color: red;
}

.gray::before {
  background-color: gray;
}

<header class="header">
  <strong class="title">TIMELINE</strong>

  <button id="button--newest-first" class="button button--selected">
    NEWEST
  </button>

  <button id="button--oldest-first" class="button">
    OLDEST
  </button>
</header>

<ul class="timeline timeline--newest-first" id="timeline">
  <li class="circle major ">
    Major Event | Yesterday
  </li>

  <li class="circle gray">
    Information | 2 days ago
  </li>

  <li class="circle gray">
    Information | 1 week ago
  </li>

  <li class="circle minor">
    Minor Event | 1 month ago
  </li>
</ul>

How can I reverse the order of div elements upside down on 'onclick'?

1 Answers1

Linked