Recently, I was working on an update to Cars For a Grand a website that sells cars for under $1,000. I was recoding the search page and I had a long list of cars in a particular zip code. Since I didn’t want to show the details of the car in the immediate view, I would use a toggle approach to show/hide the details on the page.
Here is an example that should get you started. Test in IE, FireFox, Chrome
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“a[id^='carLink-']“).click(function(){
match = this.id.match(/carLink-(\d+)/);
container = $(“div#carContainer-”+match[1])
container.toggle();
return false;
});
});
</script>
</head>
<body>
<ul>
<li>
<a href=”#” id=”carLink-0″>First Toggle</a><div id=’carContainer-0′ style=”display:none;”>Hello</div>
</li>
<li>
<a href=”#” id=”carLink-1″>Second Toggle</a><div id=’carContainer-1′ style=”display:none;”>Hello Again!</div>
</li>
</ul>
</body>
</html>
