CODEWITHSUNDEEP
javascripthtmlcss
ecqo
ecqo

Reputation: 83

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

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:

here

Upvotes: 0

Views: 1290

Answers (1)

Danziger
Danziger

Reputation: 21161

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>

Upvotes: 4

Related Questions