I am trying to use jquery to change class of some elements, but my website is blank when i run code [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 9 years ago.

Improve this question

I am trying to use jQuery to toggle class of some elements, but when I run code from my local server website is blank, nothing on it.

Working example on jsfiddle.

HTML:

<span class="close_button">x <div class="comment_report">Click!</div></span><br>
<span class="close_button">x <div class="comment_report">Click!</div></span><br>

CSS:

.comment_report{
    visibility:hidden;
}
.visible{
    visibility:visible;
}

JS:

$(document).ready(function() {
    $(".close_button").click(function() {
        $(this).children(".comment_report").toggleClass("visible");
    });
});

Answer 1

There is a typo on your closing style tag (in your screenshot). I think that could cause the page to go blank

Answer 2

This shouldn't (necessarily) cause the site to not render in your browser, but your markup is semantically backwards: you're nesting <div>'s inside of <span> tags. It would be better to have both the block you're trying to show, as well as the "close" button (which is really a toggle button) be inside of a div, like so:

<div id="block1">
    <span class="close_button">x</span>
    <div class="comment_report">Click!</div>
</div>
<div id="block2">
    <span class="close_button">x</span>
    <div class="comment_report">Click!</div>
</div>

Then instead of referencing the comment_report div as a child, you reference it as a sibling, like so:

$(document).ready(function() {
    $(".close_button").click(function() {
        $(this).siblings(".comment_report").toggleClass('.visible');
    });
});

I've created a fork of your jsFiddle here: http://jsfiddle.net/qJ3T7/

While this answer doesn't directly address your issue, bad markup can impact the ability of certain browsers to render your content, so it's a start. You could try adding a doctype declaration to your HTML, to see if that helps with rendering.

Is the HTML that you posted on the screenshot site the HTML as it's been written, or as it's served up by your local server? In other words, it's worth checking to make sure that the server is delivering content properly. Does a standard (non-JS) HTML page display fine? You also don't mention which browsers you've tested with -- are they all blank?

EDIT:

Just saw Huangism's answer, and that has to be it. I still stand by my assertion that your mark-up could be adjusted, but it's definitely not what's causing your error. Whenever a page doesn't render, you should definitely consider passing it through an HTML validator, such as the w3 validator here: http://validator.w3.org/. That would have caught your error!