CODEWITHSUNDEEP
jqueryhtmlcssdomaddclass
Paul
Paul

Reputation: 1327

addClass method not working

I am teaching myself jquery. I am trying for the first time to change elements of the dom using jquery. Particularly I am trying to use the method addClass to make a blue rectangle disappear. Here is the simple code:

html

<!DOCTYPE html>
<html>
    <head>
        <title>test slider</title>

        <link rel="stylesheet" type="text/css" href="styles.css">

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript" src="script.js"></script>


    </head>

    <body>

        <span id="rect"></span>

        <p id="button"> click here </p>

    </body>

</html>

css

#rect{

    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;
}

.closed {
    height: 0;
}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

jquery

$(document).ready(function(){

    $("#button").click(function(){

        $("#rect").addClass("closed");

    });
});

I am expecting the rectangle to disappear when I click the text "click me", but nothing happens. I have checked with an alert box that everything else works.This is my first attempt so I expect it might be something pretty simple I am doing wrong. Any help appreciated.

Upvotes: 0

Views: 65

Answers (3)

hungerstar
hungerstar

Reputation: 21725

That's because of the specificity of your CSS selectors. You're trying to override an ID with a class. Which won't work because an ID has a higher level of specificity than a class.

# = ID

. = Class

The main thing here is to change up the specificity of your selectors and I have outlined a few options below.

Change ID to Class

Change #rect to .rect.

$("#button").click(function() {

  $(".rect").addClass("closed");

});
.rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
.closed {
  height: 0;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="rect"></span>
<p id="button">click here</p>

Use a Different CSS Property

If you don't want to change up your ID then you you could have .closed apply a property that #rect has not set, but would also hide the element like display: none;.

$("#button").click(function() {

  $("#rect").addClass("closed");

});
#rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
.closed {
  display: none;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rect"></span>
<p id="button">click here</p>

Increase CSS Selector Specificity

Per the comments below you could change one of your selectors to make it more specific.

Change .closed to #rect.closed (no space between the t and .). This will target an element with an ID of #rect and a class of .closed.

$("#button").click(function() {

  $("#rect").addClass("closed");

});
#rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
#rect.closed {
  height: 0;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rect"></span>
<p id="button">click here</p>

Upvotes: 1

Tom Lavenziano
Tom Lavenziano

Reputation: 21

If you're just trying to make the rectangle invisible you could try setting the display property to none:

#rect{

    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;

.closed {
    display: none; 
}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

Upvotes: 0

Shniper
Shniper

Reputation: 854

Because you are using an ID for your span and a class to add the class refuses to overwrite the ID's height. One way to correct this is using !important which demands it to overwrite anything else determining the height for that element. Another way would be to have two classes that you toggle

Toggle Method:

$(document).ready(function(){

    $("#button").click(function(){

        $("#rect").toggleClass("closed open");

    });
});

DEMO

Important Method:

.closed {
    height: 0!important;
}

DEMO

Upvotes: 0

Related Questions