Including CSS, jQuery, and HTML all into one .html

Question

I've been looking around, but I can't seem to find exactly what I'm looking for. I want to include both my jQuery and CSS into one .html page, but I cant seem to get the jQuery working. I'm not new to coding, but I am new to jQuery. Here's what I have so far:

http://jsfiddle.net/b63nLkfa/1/

<div class=aboutMe>aboutMe</div>

<style>
    .bodyAmendment{
        width:100px;
    }
    .aboutMe{
        background-color: #CCCCCC;
        height:250px;
        width:200px;
        color: white;
        font-size:32px;
    }
</style>

<script src="jquery-1.11.2.js"></script>
<script>
    $(document).ready(function() {
        $('.aboutMe').click(function() {
            $(this).toggleClass('bodyAmendment');
        });
    });
</script>

Obviously, I want to toggle classes when clicked (simply change the width of the div).

Answer 1

You didn't select jquery from jsfiddle sidebar. And remove

<script src="jquery-1.11.2.js"></script>

or use

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

Here is the new link .

Answer 2

Both aboutMe and bodyAmendment have a width defined. toggleClass() appends the class, so you wind up with <div class="aboutMe bodyAmendment"> . width: 200px "wins" so it appears the code is doing nothing. Try

.bodyAmendment{
    width: 100px !important;
}

or some other combo so you're not defining the same property in both classes.

Answer 3

http://jsfiddle.net/b63nLkfa/1/

.aboutMe{
    background-color: #CCCCCC;
    height:250px;
    width:200px;
    color: white;
    font-size:32px;
}
.bodyAmendment{
     width:100px;
}

Your problem is about css priorities. Let's check my fiddle and use tool like firebug. Always.

Answer 4

You neglected to add in jQuery when you created your fiddle. This means your code was not firing. Also, when working with CSS, the last rule that is added takes precedence, regardless of when the class was added.

.test2 {
    width: 100px;
    background-color: #F00;
}

.test1 {
    width: 200px;
    background-color: #F00;
}

HTML

<div class="test1">This is 200px</div>
<div class="test1 test2">This is also 200px!</div>
<div class="test2">This is 100px</div>

The CSS "cascades" down the document, each rule that comes later taking precedence over the last.

http://jsfiddle.net/b63nLkfa/21/

Answer 5

I normally use .php, and use an

<? include "includes/js.php"; ?>

which in this one file I have all my script calls. Make it alot easier to update an entire site from one file.

Answer 6

try <div class="aboutMe">aboutMe</div>

sometimes the " " are important