[jQuery] improve my working code
Hy there.
I'm pretty new to jQuery and JS in general. I managed to build
something. I learned a lot! THX jQuery guys. When you look into my
code, could it be shorter, smarter, sharper? especially this part:
[code]
$(document).ready(function(){
$("#linkDetail1").click(function(){
$("#detail1").slideToggle("slow");
return false;
});
$("#linkDetail2").click(function(){
$("#detail2").slideToggle("slow");
return false;
});
$("#linkDetail3").click(function(){
$("#detail3").slideToggle("slow");
return false;
});
}
[/code]
what if I have to extend the IDs #linkDetail4, #linkDetail5, .....
here is the full code:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Show - Hide</title>
<style type="text/css" media="screen">
body { margin: 0; padding: 10px; font: normal 1em/1.5em Arial,
sans-serif;}
p {margin-left: 10px;}
#detail1, #detail2, #detail3 {margin: 15px; padding: 5px; border:
1px solid #ccc; display:none;}
button {border: 0;width:204px;height:29px; font-weight: bold; color:
#fff; background: url(bak_button.gif);vertical-align:bottom;}
hr {background-color:#000; border:0; height:1px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#linkDetail1").click(function(){
$("#detail1").slideToggle("slow");
return false;
});
$("#linkDetail2").click(function(){
$("#detail2").slideToggle("slow");
return false;
});
$("#linkDetail3").click(function(){
$("#detail3").slideToggle("slow");
return false;
});
$("#auswahl").change(function() {
var showland=($(this).val());
$(showland).slideToggle("slow");
return false;
})
$("#toggleAll").click(function() {
$("div.details").slideToggle("slow");
return false;
})
$("#closeAll").click(function() {
$("div.details:visible").slideUp("slow");
return false;
})
$("#openAll").click(function() {
$("div.details:hidden").slideDown("slow");
return false;
})
});
//]]>
</script>
</head>
<body>
<form method="post" action="">
<select name="choose" id="auswahl">
<option value="val" selected="selected">choose</option>
<option value="#detail1">eins</option>
<option value="#detail2">zwei</option>
<option value="#detail3">drei</option>
</select>
<button type="button" id="toggleAll" value="Toggle all">Toggle all</
button> <button type="button" id="closeAll" value="Close all">Close
all</button> <button type="button" id="openAll" value="Open all">Open
all</button>
</form>
<hr /> <hr />
<div>
jQuery is a fast, concise, JavaScript Library that simplifies how
you traverse HTML documents, handle events, perform animations, and
add Ajax interactions to your web pages. jQuery is designed to change
the way that you write JavaScript.
<br />
<a href="javascript:;" title="Details zum Kurs 1"
id="linkDetail1">Details </a>
</div>
<div id="detail1" class="details">
<h3>Hier Beispieltext 1</h3>
bliblablupp..<img src="http://i.somethingawful.com/cliff/ihateyou/
page12-04.jpg" width="175" height="154">
</div>
<hr />
<div>
"You start with 10 lines of jQuery that would have been 20 lines of
tedious DOM JavaScript. By the time you are done it's down to two or
three lines and it couldn't get any shorter unless it read your mind."
- Dave Methvin
<br />
<a href="javascript:;" title="Details zum Kurs 2"
id="linkDetail2">Details </a>
</div>
<div id="detail2" class="details">
<h3>Hier Beispieltext 2</h3>
bliblablupp.. <img src="http://i.somethingawful.com/u/lowtax/cliffy/
274-5.jpg" width="250" height="187">
</div>
<hr />
<div>
The purpose of the development team is just that: To improve the
quality of the jQuery code base (by adding in new features) and to fix
existing problems (creating a more stable library for everyone to
use). Additionally, the team is in charge of documenting all of the
jQuery API, building a stable test suite and maintaining the jQuery
build system (through which all jQuery code, documentation, and tests
are constructed).
<br />
<a href="javascript:;" title="Details zum Kurs 3"
id="linkDetail3">Details </a>
</div>
<div id="detail3" class="details">
<h3>Hier Beispieltext 3</h3>
bliblablupp..<img src="http://i.somethingawful.com/u/lowtax/cliffy/
275-1.jpg" width="250" height="225">
</div>
<hr />
</body>
</html>
[/code]