Simplifying multiple js files
Hello. I am starting to build a new site and I've found a function that works perfectly. The only thing bothering me is right now I have to link a new js file for each function.
- <script src="jquery-1.4.1.min.js"></script>
<script src="first.js"></script>
<script src="second.js"></script>
<script src="third.js"></script>
I think I might be able to use an if elseif else statement, but I'm not sure how. Here is a sample of one of the js files:
- $(document).ready(function () {
var $div1 = $('.page1');
var $div2 = $('.page2');
var $div3 = $('.page3');
var height = $div1.height();
$div1.hide().css({ height : 0 });
$('#first a').click(function () {
if ($div1.is(':visible')) {
$div1.stop().animate({ height: 0 }, { duration: 1000, complete: function () {
$div1.hide();
} });
} else {
$div1.stop().show().animate({ height : height }, { duration: 1000 });
$div2.stop().hide().css({ height : 0 });
$div3.stop().hide().css({ height : 0 });
}
return false;
});
});
And then if the user clicks on the second link it calls:
- $(document).ready(function () {
var $div1 = $('.page1');
var $div2 = $('.page2');
var $div3 = $('.page3');
var height = $div2.height();
$div2.hide().css({ height : 0 });
$('#second a').click(function () {
if ($div2.is(':visible')) {
$div2.stop().animate({ height: 0 }, { duration: 1000, complete: function () {
$div2.hide();
} });
} else {
$div2.stop().show().animate({ height : height }, { duration: 1000 });
$div1.stop().hide().css({ height : 0 });
$div3.stop().hide().css({ height : 0 });
}
return false;
});
});
and so on and so on for each link the user clicks.
To give you a better understanding of it all, here's a link to my test site:
Any help to simply my coding would be greatly appreciated.
Thanks,
Jeremy