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

StackOverflow https://stackoverflow.com/questions/23565041

  •  18-07-2023
  •  | 
  •  

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;
    }
Was it helpful?

Solution

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>

OTHER TIPS

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>

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");
    });
  });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top