Question

How can I run this script, tried to run it in html file, but it doesn’t seem to work..

I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/

<script type="text/javascript">
$('.question, .answer')
    .css("display", "none");
$('.section')
    .click(function ()
{
    var $others = $('.question:visible')
        .not(this);
    $others.next('.answer')
        .hide();
    $others.slideToggle(500);
    $(this)

        .next('.question')
        .slideToggle(500);
});
$('.question')
    .click(function ()
{
    $(this)
        .next('.answer')
        .slideToggle(500);
});​
</script>

Answer 1

First make sure you’re including the jQuery library:

<script src="path/to/jquery.min.js"></script>

Make sure you’re not including the jQuery within those tags, so you’ve got:

<script src="path/to/jquery.min.js"></script>
<script>
    /* Your jQuery here */
</script>

And then ensure you’re using a $(document).ready(), or $(window).load(), handler:

<script src="path/to/jquery.min.js"></script>
<script>
    $(document).ready(
        function(){
            /* Your jQuery here */
        });
</script>

The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.