CODEWITHSUNDEEP
jqueryhtmlcss
MickeyMouseFL
MickeyMouseFL

Reputation: 109

jQuery is not changing display to block

Hey so I have a function that changes display: none; to display: block;. Pretty simple, I've done this kind of thing before. Unfortunately, it isn't changing the CSS. I have absolutely no idea what's wrong because I've done this before and I can see nothing wrong with my code.

Code:

$(function() {
    var boxOn = false;
    $("#programButtonExtra").click(function() {
        if (boxOn === false) {
            $("#extraBox").css("display", "block");
            boxOn = true;
        }
    });
    $(document.body).click(function() {
        if (boxOn === true) {
           $("#extraBox").css("display", "none");
           boxOn = false;
        }
    });
});
#programButton {
    width: 1000px;
    height: 100px;
    background: #EAEAEA;
    border: 1px solid black;
    text-align: left;
}
#programButtonText, #programButtonExtra {
    font-family: 'Open Sans', sans-serif;
    font-size: 34px;
    margin-left: 8px;
}
#extraBox {
    width: 180px;
    background: white;
    border: 2px solid #999999;
    margin-top: -80px;
    margin-left: 1000px;
    position: absolute;
    display: none;
}
#extraBox1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: #47BC47;
    background: white;
    margin: 5px;
    margin-bottom: 10px;
}
#extraBox1:hover {
    cursor: pointer;
    background: #47BC47;
    color: white;
}
#extraBox2:hover {
    cursor: pointer;
    background: #D41B1B;
    color: white;
}
#extraBox2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: #D41B1B;
    background: white;
    margin: 5px;
    margin-top: 0px;
}
#programButtonText {
    line-height: 65px;
}
.hoverText {
    cursor: pointer;
}
#lastVisited {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    margin-top: -35px;
    margin-left: -793px;
}
#testButton {
    cursor: default;
}
#programButtonExtra {
    margin-top: -41px;
    margin-left: 980px;
}
span.tooltips {
  position: relative;
  display: inline;
}
span.tooltips span {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  position: absolute;
  width: 800px;
  color: #FFFFFF;
  background: #000000;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  visibility: hidden;
  border-radius: 9px;
}
span.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0; height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
span:hover.tooltips span {
  visibility: visible;
  display: block;
  opacity: 1;
  bottom: 30px;
  right: -378px;
  top: -35px;
  margin-left: -76px;
  z-index: 999;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tests | CyanCoding</title>
    <script src="home.js"></script>
    <link rel="icon" href="Logo.ico">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="test.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|PT+Sans|Questrial|Raleway|Roboto|Work+Sans" rel="stylesheet">
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <center>
        <div id = "testButton">
            <div id = "programButton"><div id = "programButtonText"><span class = "hoverText">Random Information Generator&nbsp;<span class = "tooltips" id = "information">ⓘ<span>The Random Information Generator quickly creates realistic information.</span></span></span></div><div id = "programButtonExtra"><span class = "hoverText">⋮</span></div></div>
            <div id = "lastVisited">Last visited: Never</div>
            <div id = "extraBox">
                <div id = "extraBox1">Save for later</div>
                <div id = "extraBox2">Report a bug</div>
            </div>
        </div>
    </center>
  </body>
</html>

As you can see (best results on the full page results), when you click the ⋮ (vertical ellipsis), it does not change the display to block. I know the if function is working because I put an alert box in there and it fired, but it isn't seeming to change. Any ideas?

Upvotes: 0

Views: 34

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23738

See below if you want to show and hide by clicking the menu button you can use toggle() to simplify things

$(document).ready(function() {

  $("#programButtonExtra").click(function() {
    $("#extraBox").toggle();
  });
});
toggle()#programButton {
  width: 1000px;
  height: 100px;
  background: #EAEAEA;
  border: 1px solid black;
  text-align: left;
}

#programButtonText,
#programButtonExtra {
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  margin-left: 8px;
}

#extraBox {
  width: 180px;
  background: white;
  border: 2px solid #999999;
  margin-top: -80px;
  margin-left: 1000px;
  position: absolute;
  display: none;
}

#extraBox1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  color: #47BC47;
  background: white;
  margin: 5px;
  margin-bottom: 10px;
}

#extraBox1:hover {
  cursor: pointer;
  background: #47BC47;
  color: white;
}

#extraBox2:hover {
  cursor: pointer;
  background: #D41B1B;
  color: white;
}

#extraBox2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  color: #D41B1B;
  background: white;
  margin: 5px;
  margin-top: 0px;
}

#programButtonText {
  line-height: 65px;
}

.hoverText {
  cursor: pointer;
}

#lastVisited {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  margin-top: -35px;
  margin-left: -793px;
}

#testButton {
  cursor: default;
}

#programButtonExtra {
  margin-top: -41px;
  margin-left: 980px;
}

span.tooltips {
  position: relative;
  display: inline;
}

span.tooltips span {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  position: absolute;
  width: 800px;
  color: #FFFFFF;
  background: #000000;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: none;
  visibility: hidden;
  border-radius: 9px;
}

span.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

span:hover.tooltips span {
  visibility: visible;
  display: block;
  opacity: 1;
  bottom: 30px;
  right: -378px;
  top: -35px;
  margin-left: -76px;
  z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="test.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Open+Sans|PT+Sans|Questrial|Raleway|Roboto|Work+Sans" rel="stylesheet">

<center>
  <div id="testButton">
    <div id="programButton">
      <div id="programButtonText"><span class="hoverText">Random Information Generator&nbsp;<span class = "tooltips" id = "information">ⓘ<span>The Random Information Generator quickly creates realistic information.</span></span>
        </span>
      </div>
      <div id="programButtonExtra"><span class="hoverText">⋮</span></div>
    </div>
    <div id="lastVisited">Last visited: Never</div>
    <div id="extraBox">
      <div id="extraBox1">Save for later</div>
      <div id="extraBox2">Report a bug</div>
    </div>
  </div>
</center>

Upvotes: 1

Related Questions