Add transition to a changing div button - Html

RiyandiKarlus
March 15, 2023
214 views
0 votes
2 Answers

I have 3 buttons to change to a different visible div with this code, maybe later I would add more buttons to change the divs.

The Current active is the first div (set display block), all other divs are hidden (set display none)

So if I clicked a button, the active div changes based on the button clicked.

function switchUnit1() {
            if (document.getElementById('units2')) {
                if (document.getElementById('units2').style.display == 'block') {
                    document.getElementById('units2').style.display = 'none';
                    document.getElementById('units1').style.display = 'block';
                }
            }
            if (document.getElementById('units3')) {
                if (document.getElementById('units3').style.display == 'block') {
                    document.getElementById('units3').style.display = 'none';
                    document.getElementById('units1').style.display = 'block';
                }
            }
            if (document.getElementById('units4')) {
                if (document.getElementById('units4').style.display == 'block') {
                    document.getElementById('units4').style.display = 'none';
                    document.getElementById('units1').style.display = 'block';
                }
            }
}  
  
function switchUnit2() {
            if (document.getElementById('units1')) {

                if (document.getElementById('units1').style.display == 'block') {
                    document.getElementById('units1').style.display = 'none';
                    document.getElementById('units2').style.display = 'block';
                }
            }
            if (document.getElementById('units3')) {
                if (document.getElementById('units3').style.display == 'block') {
                    document.getElementById('units3').style.display = 'none';
                    document.getElementById('units2').style.display = 'block';
                }
            }
            if (document.getElementById('units4')) {
                if (document.getElementById('units4').style.display == 'block') {
                    document.getElementById('units4').style.display = 'none';
                    document.getElementById('units2').style.display = 'block';
                }
            }
}
  
function switchUnit3() {
            if (document.getElementById('units1')) {

                if (document.getElementById('units1').style.display == 'block') {
                    document.getElementById('units1').style.display = 'none';
                    document.getElementById('units3').style.display = 'block';
                }
            }
            if (document.getElementById('units2')) {
                if (document.getElementById('units2').style.display == 'block') {
                    document.getElementById('units2').style.display = 'none';
                    document.getElementById('units3').style.display = 'block';
                }
            }
            if (document.getElementById('units4')) {
                if (document.getElementById('units4').style.display == 'block') {
                    document.getElementById('units4').style.display = 'none';
                    document.getElementById('units3').style.display = 'block';
                }
            }
}

<div class='units-buttons' id='units-buttons'>
      <button class='units-button units-selected' onclick='switchUnit1();' type='button' value='Click'>Type 36A</button>
      <button class='units-button' onclick='switchUnit2();' type='button' value='Click'>Type 36B</button>
      <button class='units-button' onclick='switchUnit3();' type='button' value='Click'>Type 56</button>

<div id='units1' style='display: block;'>Image 1</div>
<div id='units2' style='display: none;'>Image 2</div>
<div id='units3' style='display: none;'>Image 3</div>

I want to add a fading transition from 1 div to another every time a button is clicked.

Answers

Try opacity and z-index with transition to reach fade in/out animation.

Set position: absolute;top: 0; on .units make sure they are in same position.

const btn = [...document.getElementsByClassName("units-button")];
const units = [...document.getElementsByClassName("units")];
const fading = (e) => {
  let i = btn.indexOf(e.target);
  [btn, units].forEach((arr) => arr.forEach((d) => d.classList.remove("units-selected")));
  [btn, units].forEach((arr) => arr[i].classList.add("units-selected"));
};
btn.forEach((d) => d.addEventListener("click", fading));

.units {
  opacity: 0;
  z-index: 0;
  transition: 0.4s;
  position: absolute;
  top: 0;
}

.units.units-selected {
  opacity: 1;
  z-index: 1;
  position: relative;
}

<div class="units-buttons" id="units-buttons">
  <button class="units-button units-selected" type="button" value="Click">Type 36A</button>
  <button class="units-button" type="button" value="Click">Type 36B</button>
  <button class="units-button" type="button" value="Click">Type 56</button>
</div>
<div style="position: relative;">
  <div class="units units-selected">Image 1</div>
  <div class="units">Image 2</div>
  <div class="units">Image 3</div>
</div>

For this to work you’d need to use something else than display to change which divs are visible, as transition doesn’t support display.

But since you want it to fade in anyways, you could use opacity instead, which, when transitioned, will make it fade in nicely. I’d also recommend toggling classes on the divs instead of setting styles directly.

Here is an example (I also allowed myself to modify your code a bit to make it more expandable and hopefully more readable):

const units = [];
initUnits();

function initUnits() {
  units.push(document.getElementById('units1'));
  units.push(document.getElementById('units2'));
  units.push(document.getElementById('units3'));
}

function switchUnit(index) {
  if (index >= 0 && units.length > index) {
    for (let i = 0; i < units.length; i++) {
      units[i].classList.add("hidden");
      if (i === index) {
        units[i].classList.remove("hidden");
      }
    }
  }
}

.can-hide {
  transition: opacity 1s;
  opacity: 1;
}

.hidden {
  opacity: 0;
}

<div class='units-buttons' id='units-buttons'>
  <button class='units-button units-selected' onclick='switchUnit(0);' type='button' value='Click'>Type 36A</button>
  <button class='units-button' onclick='switchUnit(1);' type='button' value='Click'>Type 36B</button>
  <button class='units-button' onclick='switchUnit(2);' type='button' value='Click'>Type 56</button>

  <div id='units1' class="can-hide">Image 1</div>
  <div id='units2' class="can-hide hidden">Image 2</div>
  <div id='units3' class="can-hide hidden">Image 3</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Add transition to a changing div button – Html

Answers