Question 42963 in Html Question posted in
Some basic documentation can be found here.

Animating an element being added on click with Javascript – Html

I’m trying to make a contact icon which, when pressed moves to the side, revealing the contact information. I would like the text to remain centred and for the contact info to fade in. So far I have this:

<div class="contacts">
    <div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
    <div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
</div>

 let contactIcon = document.querySelectorAll('.contactIcon');
    for (let i = 0; i < contactIcon.length; i++) {
        contactIcon[i].addEventListener('click', function () {
            let contactInfo = contactIcon[i].querySelector('.contactInfo');
            if (contactInfo.style.display == 'none') {
                contactInfo.style.visibility = 'visible'
                contactInfo.style.display = 'inline';
                contactInfo.style.maxWidth ='100px';
            }
            else {
                contactInfo.style.visibility = 'hidden';
                contactInfo.style.display = 'none';
                contactInfo.style.maxWidth = '0';
            }
        });

.contactIcon {
    overflow: hidden;
}

.contactInfo {
    visibility: hidden;
    display: none;
    opacity: 1;
    max-width: 500px;
    transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;
}

The code works to a degree, the icon shifts to allow space, but there is no animation and I’m not sure why, I’ve tried toggling a ‘.hide’ class, but also couldn’t get that to work. Also it takes 2 clicks to make the content appear, and I’m struggling to understand that also.

Tags:

2

Answers


  1. 0

    The latter consern is easy to answer: contactInfo.style.display == 'none' only detects inline styles, so you must remove display:none; from css and attach it to html span. as for animations, display: none spoils everything here, choose opacity or width to make element visually disappear.

      <div class="contactIcon">ICON
    <span class="contactInfo" style="opacity: 0"> (+xx)xxxxxxx</span>
  </div>

    .contactInfo {
  opacity: 1;
  max-width: 500px;
  /*transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;*/
  transition: all 1.6s;
}

    let contactIcon = document.querySelectorAll(".contactIcon");

for (let i = 0; i < contactIcon.length; i++) {
  contactIcon[i].addEventListener("click", function () {
    let contactInfo = contactIcon[i].querySelector(".contactInfo");
    if (contactInfo.style.opacity == "0") {
      contactInfo.style.opacity = "1";
    } else {
      contactInfo.style.opacity = "0";
    }
  });
}

    p.s. I attached inline style to make you see, how it has been detected with contactInfo.style.opacity == "0" here is better way without inline style:

    let contactIcon = document.querySelectorAll(".contactIcon");

for (let i = 0; i < contactIcon.length; i++) {
  contactIcon[i].addEventListener("click", function () {
    let contactInfo = contactIcon[i].querySelector(".contactInfo");
    if (contactInfo.style.opacity == "1") {
      contactInfo.style.opacity = "0";
      contactInfo.style.width = "0";
    } else {
      contactInfo.style.opacity = "1";
      contactInfo.style.width = "92px";
    }
  });
}
    .contactIcon {
  width: 240px;
  border-width: 2px;
  border-style: dashed;
  border-color: red;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.contactInfo {
  overflow: hidden;
  opacity: 1;
  width: 0;
  transition: all 1.6s;
  /*transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;*/
}
        <div class="contacts">
      <div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
      <div class="contactIcon">
        ICON
        <span class="contactInfo"> (+xx)xxxxxxx</span>
      </div>
    </div>
    Login or Signup to reply.
  2. 0

    try this

    let contactIcon = document.querySelectorAll('.contactIcon');
    for (let i = 0; i < contactIcon.length; i++) {
        contactIcon[i].addEventListener('click', function () {
            let contactInfo = contactIcon[i].querySelector('.contactInfo');
            let icon = contactIcon[i].querySelector('.icon');
            if (contactInfo.style.opacity == 0) {
                icon.style.marginLeft = '-40px';
                icon.style.opacity = 0;
                contactInfo.style.display = 'inline';
                contactInfo.style.opacity = 1;
                contactInfo.style.maxWidth ='100px';
            }
            else {
                icon.style.marginLeft = '0';
                icon.style.opacity = 1;
                contactInfo.style.opacity = 0;
                contactInfo.style.maxWidth = '0';
            }
        });
    }
    .contactIcon {
    overflow: hidden;
    cursor : pointer;
}

.icon {
    opacity: 1;
    margin-left: 0;
    transition: all .3s ease-in;
 }

.contactInfo {
    opacity: 0;
    max-width: 500px;
    transition: opacity .3s ease-in;
}
    <div class="contacts">
    <div class="contactIcon"><i class="icon 1">✈️</i><span class="contactInfo"> (+xx)xxxxxxx</span></div>
    <div class="contactIcon"><i class="icon 2">✈️</i><span class="contactInfo"> (+xx)xxxxxxx</span></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search