Multiple jquery Scripts on one page - php

Question

I am brand new to Jquery and have run into something that if answered will help greatly in the future. I have 2 very simple questions
I am using codeigniter, HTML5 and all php pages as well.
I have a menu 'aside' with 4-5 sections that I want to be able to close to save space. So I am using 2 simple slideToggle scripts.
$("a").click(function () {
$('#cat').slideToggle('slow', function() {
})
});
and
$("button").click(function () {
$('#dog').slideToggle('slow', function() {
})
});
The problem is, if I use button on both, both scripts operate even though I am requesting the script to run on 2 different ID's ( I know the dog and cat thing is silly, I just threw them in to see if a fake id would work and it did)
The question is, how can I use button OR a href on both scripts to preserve my styling?
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?
Thanks for helping, these are my first two scripts. At least they work :)
<div class="menu">
<h2>News Links</h2>
Display
<!--
if I use "button" here, both scripts run on tandem
-->
<script>
$("a").click(function () {
$('#cat').slideToggle('slow', function() {
})
});
benchmark->mark('links_start');
$this->db->order_by('id', 'DESC');
$this->db->limit('10');
$query = $this->db->get('links');
foreach ($query->result() as $row)
{
echo "link \" title=\"$row->title\" target=\"_blank\">$row->name ";
}
$this->benchmark->mark('links_end');
?>
</ul>
</div>
</div>
<div class="menu">
<h2>Archives</h2>
<button>Display</button> <!--if I use "a" here, both scripts run on tandem
-->
<script>
$("button").click(function () {
$('#dog').slideToggle('slow', function() {
})
});
</script>
<div id="dog">
<?php
$this->db->order_by('id', 'DESC');
$where = "publish";
$this->db->where('status', $where);
$this->db->select('id, title', FALSE);
$this->db->select('DATE_FORMAT(date, "%b %D %Y")AS date');
$this->db->from('posts');
$query = $this->db->get();
foreach ($query->result() as $row)

Answer 1

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.

Answer 2

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 3

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.