html - Vanilla JavaScript toggle function moves my h2 tag up

Question

Welcome To Ask or Share your Answers For Others

html - Vanilla JavaScript toggle function moves my h2 tag up

posted Jan 27, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Vanilla JavaScript toggle function moves my h2 tag up

I have a small problem which I can't find the solution for and it's making me frustrated. I am including a link to my CodePen where you can check the code. The problem is that the h2 tag moves up a little once it is clicked and the hidden content displayed. I want it to stay in place and the hidden content to take space below and not move the h2 tag up a few pixels.

//Toggle hidden text on/off
function toggleContent(event) {
  if (event.target && event.target.className === "event-trigger") {
    var x = event.target.nextElementSibling;

    if (x.style.display == "block") {
      x.style.display = "none";
    } else if (x.style.display == "none") {
      x.style.display = "block";
    } else {
      x.style.display = "block";
    }
  }
}
document.addEventListener("click", toggleContent, true);

.contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2em;
}

h1 {
  text-align: center;
  color: #1d1e35;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 13px;
  margin: 1.2em 0 1.2em 0;
  color: #4a4b5e;
  z-index: 4;
}

h2:hover {
  color: #f47c57;
  cursor: pointer;
}

h2:focus {
  color: #4a4b5e;
}

h2::after {
  content: "";
  border: solid #f47c57;
  border-width: 0 3px 3px 0;
  padding: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  float: right;
  margin-left: 1em;
}

.hidden-text {
  display: none;
  max-width: 21em;
  margin-bottom: 1em;
}

<body>
  <main>
    <div class="card">
      <div class="contents">
        <h1>FAQ</h1>

        <h2 class="event-trigger">How many team members can I invite?</h2>
        <p class="hidden-text">
          You can invite up to 2 additional users on the Free plan. There is
          no limit on team members for the Premium plan.
        </p>
        <hr />

        <h2 class="event-trigger">What is the maximum file upload size?</h2>
        <p class="hidden-text">
          No more than 2GB. All files in your account must fit your allotted
          storage space.
        </p>
        <hr />

        <h2 class="event-trigger">How do I reset my password?</h2>
        <p class="hidden-text">
          Click “Forgot password” from the login page or “Change password”
          from your profile page. A reset link will be emailed to you.
        </p>
        <hr />

        <h2 class="event-trigger">Can I cancel my subscription?</h2>
        <p class="hidden-text">
          Yes! Send us a message and we’ll process your request no questions
          asked.
        </p>
        <hr />

        <h2 class="event-trigger">Do you provide additional support?</h2>
        <p class="hidden-text">
          Chat and email support is available 24/7. Phone lines are open
          during normal business hours.
        </p>
        <hr />
      </div>
    </div>

    <div class="attribution">
      <p>
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
          Frontend Mentor</a>.<br />
        Coded by <a href="#">?an Fer?</a>.
      </p>
    </div>
  </main>

  <script src="app.js"></script>
</body>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-01-26T20:38:34+0000

The reason this is happening is because you are using Flexbox to align everything centered vertically. When you click on the H2 and more content is displayed then naturally the "center" moves to accommodate for the additional content. If you don't want it to move when clicked then you'll need to remove the styles which are centering it vertically with Flexbox.

Categories

html - Vanilla JavaScript toggle function moves my h2 tag up

html - Vanilla JavaScript toggle function moves my h2 tag up

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags