Why isn't jquery toggling the class of this div?

Question

I'm trying to use Jquery to toggle the class of the div with the element #house1, however no matter what I do it just doesn't seem to want to hide itself whenever I click on it.

This is the relevant html code together with the script:

    <!DOCTYPE html>
    <html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
        <link href="bas.css" type="text/css" rel="stylesheet"/>
        <meta charset="utf-8"/>
        <title>Jans Fastigheter</title>
    </head>
    <body>
    <div class="header">
        <div>
            <img src="jans_logo.jpg">
        </div>
        <ul>
            <li><a class="current_huvud" href="Huvudsida.html">Huvudsida</a></li>
            <li><a href="kontakta oss.html">Kontakta Oss</a></li>
        </ul>
    </div>
    <div>
        <div id="house1">
        </div>
        <div id="house2">
        </div>
        <div id="house3">
        </div>
    </div>

    <script>
    $(document).ready(function() {
        $("#house1").click(function() {
            $(this).toggleclass("hide");
        });
    });
    </script>
    </body>
    </html>

And the relevant css code:

    #house1 {
width:250px;
height:250px;
margin: 30px 30%;
background-image: url("apartment_building.jpg");
background-size: cover;
    }
    .hide {
display: none;
    }

One look at the error messages in your browser's console would immediately answer this. Make it a habit to look in the future. — Jon, May 09 '14 at 12:48

score 2 · Accepted Answer · answered May 09 '14 at 12:50

2

Change $(this).toggleclass("hide"); to $(this).toggleClass("hide");

include Jquery to your code

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

answered May 09 '14 at 12:50

Diego Vieira

266
3
12

Thank you so much, I had forgotten to include Jquery in the first place. – Farmer May 09 '14 at 13:17

score 1 · Answer 2 · answered May 09 '14 at 12:47

1

This should be:

$(this).toggleClass("hide");

instead:

$(this).toggleclass("hide");

C is capital of toggleClass()

Also make sure Jquery is included on page, i don't see included on page.

Add following line in your page:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

answered May 09 '14 at 12:47

Ehsan Sajjad

61,834
16
105
160

Hi, please can you tell me what javascript IDEs give Intellisense to trap this sort of error. Because I want to learn JavaScript. Thanks. – S Meaden May 09 '14 at 12:49
Dreamwaever is good i think – Ehsan Sajjad May 09 '14 at 12:50
see this:http://stackoverflow.com/questions/7794719/best-ide-for-html5-javascript-css-jquery-support-with-gui-building-tools – Ehsan Sajjad May 09 '14 at 12:50

score 1 · Answer 3 · answered May 09 '14 at 12:52

jsfiddle

    <div>
        <div class="house"  >
            aaaaa
        </div>
        <div class="house"  >
            bbbb
        </div>
        <div class="house">
            cccc
        </div>
    </div>

  $(document).ready(function() {  
     $(".house").click(function() {
           $(this).toggleClass("hide");
    });
  });

Why isn't jquery toggling the class of this div?

3 Answers3