addClass method not working

Question

addClass method not working

66 views Asked by Paul At 27 October 2016 at 18:41

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.

Original Q&A

There are 3 answers

Shniper On 27 October 2016 at 18:51

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

Tom Lavenziano On 27 October 2016 at 18:52

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;
}

**hungerstar** · Accepted Answer · 2016-10-27T18:47:14+00:00

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>

TechQA.

addClass method not working

There are 3 answers

Change ID to Class

Use a Different CSS Property

Increase CSS Selector Specificity

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in DOM

Related Questions in ADDCLASS

Popular Questions

Popular Tags

Trending Questions