How can I make a div disappear when I click a button

Asked

Viewed 179 times

0

So I have a page and wanted to make one of those menus tops that when I click it makes appear the menu but I don’t know how to make mine div all which includes almost all html!

My code:

body{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar{
  height: 45px;
}

.MASlime{
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals{
  position: absolute;
  font-size: 30px;
}

.Total{
  position: absolute;
  top: 80px;
  left: 140px;
}

.TotalEarnings{
  position: absolute;
  top: 80px;
  left: 200px;
}

.TotalO{
  position: absolute;
  top: 150px;
  left: 140px;
}

.TotalOrders{
  position: absolute;
  top: 150px;
  left: 200px;
}

#Earnings{
  position: absolute;
  top: 80px;
  left: 350px;
}

#Orders{
  position: absolute;
  top: 150px;
  left: 350px;
}

.NewOrder{
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName{
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate{
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU{
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT{
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.Menu{
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu{
  text-align: center;
  width: 100%;
  display: none;
}

.menu a{
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 70px;
  padding-bottom: 10px;
  font-size: 30px;
  background: #252C35;
}

.All{
  display: block;
}

#toggle{
  display: none;
}

#toggle:checked + .menu{
  display: block;
}

#toggle:checked ~ .All{
  display: none;
}
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>EComerce App Slime</title>
        <link rel="stylesheet" href="css/index.css">
      </head>
      <body>
        <div id="menu">
          <label for="toggle" class="Menu">&#9776;</label>
          <input type="checkbox" id="toggle"/>
          <div class="menu">
              <a href="#">Slime Recipe</a>
          </div>
        </div>
        <div id="UpperBar">
          <p class="MASlime">MASlime</p>
        </div>
        <div class="All">
          <div id="HomePage">
            <div id="Totals">
              <p class="Total">Total</p>
              <p class="TotalEarnings">Earnings</p>
              <p class="TotalO">Total</p>
              <p class="TotalOrders">Orders</p>
              <p id="Earnings">100€</p>
              <p id="Orders">1</p>
            </div>
            <div id="NewOrder">
              <p class="NewOrder">New Order</p>
              <form id="OrderForm">
                <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
                <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
                <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
                <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
              </form>
            </div>
        </div>
        <script src="js/index.js"></script>
      </body>
    </html>

Print of the problem:

inserir a descrição da imagem aqui

html css
  • 1

    But it would not be strange this behavior, the content of the site disappear by clicking on the menu?

  • @Leandrade My goal is that the website disappear so that only the menu is in view !

  • What you normally do in these menus is a backdrop, IE, when the menu opens behind it you from the display block in a div that will cover up everything behind, not necessarily you need to "delete" the page, just put something over it solves

  • @hugocsl could demonstrate how I could do this in my html?

3 answers

1


In your HTML:

<input type="checkbox" id="toggle"/>

Alters to:

<input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>

And in HTML

<div class="All">

Alters to:

<div class="All" id="divAll">

And insert the javascript code below your HTML content before < /body >

<script>
function meuMenuToggle() {
  var x = document.getElementById("divAll");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

So when you click on the menu, the content will be hidden, and when you click on the menu to close, the content will be discovered.

Understanding: the javascript function meuMenuToggle(); checks if the display='None' style does not exist and is true; if it is TRUE, the function inserts the style in the DIV that was identified in the variable 'x' through the ID of the caught element ("divAll"), in the change suggested above (< div class='All' id='divAll' >).

The event of opening the mouse toggles the DIV to display None, and toggles to display block when you click again on the menu.

  • @Deadsec thank you!

  • I could give +1 in the publication ! Apparently I was ban the stack until I hit better points in the publications!

  • @Deadsec can’t vote on my answer, sorry!

  • I’m saying in my post! But in case you don’t get thanks anyway for the help!

0

Follow the option only as CSS as you wanted.

inserir a descrição da imagem aqui

I did as I said, I put a div the more hidden, I called her .backdrop, so when the label active the checkbox I’ll show you this div and it covers up all the content that comes down, giving the impression that it’s gone.

    body {
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      margin-bottom: 0px;
      background: #252C35;
      color: white;
    }

    #UpperBar {
      height: 45px;
      top: 1px;
      left: 40px;
      position: absolute;
      z-index: 2;
    }

    .MASlime {
      position: absolute;
      font-size: 30px;
    }

    #Totals {
      position: absolute;
      font-size: 30px;
    }

    .Total {
      position: absolute;
      top: 80px;
      left: 140px;
    }

    .TotalEarnings {
      position: absolute;
      top: 80px;
      left: 200px;
    }

    .TotalO {
      position: absolute;
      top: 150px;
      left: 140px;
    }

    .TotalOrders {
      position: absolute;
      top: 150px;
      left: 200px;
    }

    #Earnings {
      position: absolute;
      top: 80px;
      left: 350px;
    }

    #Orders {
      position: absolute;
      top: 150px;
      left: 350px;
    }

    .NewOrder {
      position: absolute;
      top: 250px;
      left: 200px;
      font-size: 30px;
    }

    .OrderName {
      position: absolute;
      top: 350px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .OrderDate {
      position: absolute;
      top: 400px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .SKU {
      position: absolute;
      top: 450px;
      left: 140px;
      width: 250px;
      height: 25px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .SUBMIT {
      position: absolute;
      top: 500px;
      left: 220px;
      width: 100px;
      height: 40px;
      background-color: #252C35;
      color: white;
      border: 1px;
      border-style: solid;
      border-radius: 5px;
      border-color: white;
      padding: 5px;
    }

    .Menu {
      position: absolute;
      top: 25px;
      left: 480px;
      font-size: 30px;
      cursor: pointer;
      z-index: 3;
    }

    .menu {
      text-align: center;
      width: 100%;
      display: none;
    }

    .menu a {
      display: block;
      border-bottom: 1px solid #EAEAED;
      text-decoration: none;
      color: white;
      margin-top: 70px;
      padding-bottom: 10px;
      font-size: 30px;
      background: #252C35;

      z-index: 3;
      position: relative;
    }

    .All {
      display: block;
    }

    #toggle {
      display: none;
    }

    #toggle:checked+.menu,
    #toggle:checked~.backdrop {
      display: block;
    }

    #toggle:checked~.All {
      /* display: none; */
    }

    .backdrop {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: #252C35;
      top: 0;
      left: 0;
      z-index: 1;
      display: none;
    }

    #menu {
      /* position: relative; */
      z-index: 2
    }
<div id="menu">
    <label for="toggle" class="Menu">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Slime Recipe</a>
    </div>
    <div class="backdrop"></div>
</div>
<div id="UpperBar">
    <p class="MASlime">MASlime</p>
</div>
<div class="All">
    <div id="HomePage">
        <div id="Totals">
            <p class="Total">Total</p>
            <p class="TotalEarnings">Earnings</p>
            <p class="TotalO">Total</p>
            <p class="TotalOrders">Orders</p>
            <p id="Earnings">100€</p>
            <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
            <p class="NewOrder">New Order</p>
            <form id="OrderForm">
                <input class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" required>
                <input class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
                <input class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
                <input class="SUBMIT" type="button" name="Submit" value="SUBMIT">
            </form>
        </div>
    </div>
</div>

  • I ended up settling with js but thanks anyway!

  • @Deadsec no problem, take the opportunity to study the code later to endenter what was done, will help you on other occasions and without need JS, seeing an answer here to your other question ;)

  • I could give +1 in the publication ! Apparently I was ban the stack until I hit better points in the publications!

-1

 var display = document.getElementById("aqui vai o id da div").style.display;
        if(display == "none")
            document.getElementById("aqui vai o id da div").style.display = 'block';
        else
            document.getElementById("aqui vai o id da div").style.display = 'none';

  • What does it do? How to apply in the colleague’s code? Only a Ctrl+V here will not solve the colleague’s problem...

  • Could you explain how I can apply this code to mine to solve my problem?

  • Watch that code there you can put in your code, you can

  • I don’t think I need to use Javascript for this, so much so that the question does not have the Javascript tag, only Html and Css!!

  • if it’s only html and css the answer is at this link: https://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css

  • @Eduardomoritz for me did not fuck but I am open to possibilities that use js as long as it works!

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.