Multiple jquery Scripts on one page

Answer 1

You can used combined selectors:

$("a, button").click(function () {
    $('#cat').slideToggle('slow');
}); 

That will allow you to run the same function when either an a or a button is clicked.

My second question is can you put multiple scripts on a .js file for inclusion and how would you do it? Does each get script tags or some other kind of separator?

A javascript 'script' generally refers to a file included by the script tag, although that usage is ambiguous.

What you've got in your post is a javascript statement, probably inside a script tag on your page:

<script type="text/javascript">
    function helloWorld() {
        alert('Hello world');
    }
</script>

You can do this (inline to the page), or move the contained code out to a .js file and reference it:

<script type="text/javascript" src="myjavascript.js"></script>

Your myjavascript.js file would look like this:

function helloWorld() {
    alert('Hello world');
}

myjavascript.js can contain as much javascript as you'd like. Common approaches are to put grouped functionality into a single javascript file, and include it in the page. This makes it easy to re-use the javascript you've written across multiple pages by including it with the script tag on each page that makes use of it (I assume you've done this with the jquery javascript library already).

You can do the exact same thing that jquery has done, and dump all your javascript into a .js file and use script to load it into your page.

Answer 2

In re: your 2nd question: The code you posted

$("a").click(function () {
    $('#cat').slideToggle('slow', function() {
    })
});

… is one statement. You can write as many statements as you'd like into a single javascript file or <script> tag. If you have multiple JavaScript files, you can concatenate them into one file and reference that file from a script tag.

Answer 3

I think what you want is something like this:

<button id="news_display">Display News</button>

<button id="archive_display">Display Archive</button>

$("#news_display").click(function () {
   $('#news').slideToggle('slow');
});    

$("#archive_display").click(function () {
  $('#archive').slideToggle('slow');
});   

This uses jQuery id selectors for the click events, as you already did in the anonymous functions. That way, they're specific and independent.