How to make a retractable panel that will shift another panel-CodePudding

Hello everyone who can tell me how to make a retractable panel that will shift another panel, and not be superimposed on top. If you don’t understand, then go to the AMD off site, and at the very bottom there is a button (Subscribe to the latest news from AMD ). I want to do the same but don't know how. Please, help)

CodePudding user response：

Is this the section in question? https://www.amd.com/en#subscribe-newsletter-form

The section you want to make is called accordion.
Here is a simplified version with html css and js (to allow the opening)

const accordionItems = document.querySelectorAll(".accordion-item");

accordionItems.forEach(item => {
  const header = item.querySelector(".accordion-header");
  header.addEventListener("click", function() {
    const content = item.querySelector(".accordion-content");
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
});

.accordion {
  width: 100%;
  margin: 0 auto;
}

.accordion-item {}

.accordion-header {
background-color:#f1f1f1;
  border: 1px solid #f1f1f1;
  border-radius:5px;
  padding: 10px;
  width: fit-content;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 20px;
}

.btn{margin-top:10px;padding:7px 10px;border: 1px solid #f1f1f1; border-radius: 5px; }

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div >
  <div >
    <div >Subscribe to the latest news from AMD</div>
    <div >
            <label for="edit-email">Email</label>
            <br><input type="email" id="edit-email" name="email" >
      <br><input name="submit" type="submit"  value="Submit">
    </div>
  </div>
</div>
</body>
</html>

I hope I understand your question correctly.