Change the flex-direction on button click

user_10274412 0
Viewed 950

I am trying to create an animation effect that moves two buttons when I click on them. I have the flex direction set up as a column in the container div and I essentially just want them to position as a flex row when I click on one of them (probably with a 1s animation). When I click on them currently nothing happens. Here is my code sample:

HTML

<header>
  <div class="container">
  <h1>Choose Your Allegiance</h1>
  <div id="buttons">
    <button class="fill"><img src="/assets/Jedi.png" alt="Jedi" /></button>
    <button class="fill sith">
      <img src="/assets/Sith.png" alt="Sith" />
    </div>
    </button>
  </div>
</header>

CSS

.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container.click {
  flex-direction: row;
  justify-content: space-around;
}

h1 {
  margin-left: 5vw;
  color: black;
  font-family: "Poller One", cursive;
  font-variant: small-caps;
  font-size: 3rem;
  margin-top: 6vh;
}

button {
  color: white;
  transition: 0.25s;
  float: left;
  margin: 2%;
}

button:hover,
button:focus {
  border: 2px solid red;
  color: black;
}

.fill {
  height: 120px;
  width: 150px;
  background: transparent;
  margin-top: 4vh;
  outline: none;
  border: none;
}

.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 4.5em #add8e6;
}

.sith:hover,
.sith:focus {
  box-shadow: inset 0 0 0 4.5em black;
}

#buttons {
  height: 100%;
  width: 100vw;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
}

JS

document.querySelector("button").addEventListener("click", () => {
  document.querySelector(".container").classList.toggle(".container.click");
});
css-animations button css javascript
2 Answers

There are a couple of changes you need to make to get this to work:

1. document.querySelector("button") is only selecting the first button. There are 2 you can add an event listener to the buttons

  1. use document.querySelectorAll("button") to get all the buttons, and then you can loop through them adding an event Listener to each one:
    document.querySelectorAll("button").forEach(function(button) {
        button.addEventListener("click", () => {
            document.querySelector(".container").classList.toggle("click");
      });
    });
  1. A better way is to add an event listener to the buttons container - you can get the element using getElementById and then add the listener to it:
var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
    document.querySelector(".container").classList.toggle("click");
});

2. You just use the class name when passing a class into toggle- you don't need the .. Also, you only need to toggle the click class as the container class will always apply. So what you need to use is .toggle("click");

Working Example (without your images):

var buttons = document.getElementById("buttons");
buttons.addEventListener("click", (e) => {
    document.querySelector(".container").classList.toggle("click");
});
.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container.click {
  flex-direction: row;
  justify-content: space-around;
}

h1 {
  margin-left: 5vw;
  color: black;
  font-family: "Poller One", cursive;
  font-variant: small-caps;
  font-size: 3rem;
  margin-top: 6vh;
}

button {
  color: red;
  transition: 0.25s;
  float: left;
  margin: 2%;
}

button:hover,
button:focus {
  border: 2px solid red;
  color: black;
}

.fill {
  height: 120px;
  width: 150px;
  background: transparent;
  margin-top: 4vh;
  outline: none;
  border: none;
}

.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 4.5em #add8e6;
}

.sith:hover,
.sith:focus {
  box-shadow: inset 0 0 0 4.5em black;
}

#buttons {
  height: 100%;
  width: 100vw;
  padding-top: 10vh;
  display: flex;
  justify-content: center;
}
<header>
  <div class="container">
    <h1>Choose Your Allegiance</h1>
    <div id="buttons">
      <button class="fill">Jedi</button>
      <button class="fill sith">Sith</button>
    </div>
  </div>
</header>

As for animating this change, unfortunately CSS animations cannot be applied to flexbox direction property.

user_5148780

You are using classList.toggle wrong. You'll need to do this instead:

const container = document.querySelector(".container");
container.classList.toggle("click");

Documentation on Element.classList here.

user_15585920
Related