--- a/bns_website/templates/bands/band_list.html	Sat Oct 29 21:07:53 2011 -0500
+++ b/bns_website/templates/bands/band_list.html	Sat Oct 29 22:31:42 2011 -0500
@@ -1,6 +1,20 @@
 {% extends 'base.html' %}
 {% load core_tags %}
 {% block title %}Bands{% endblock %}
+
+{% block custom_css %}
+<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
+{% endblock %}
+{% block custom_js %}
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+<script type="text/javascript">
+	$(function() {
+      $("#accordion").accordion({active: false});
+	});
+</script>
+{% endblock %}
+
 {% block content %}
 {% navbar 'bands' %}
 <h1>Bands</h1>
@@ -11,4 +25,16 @@
 <dd>{{ band.notes|linebreaksbr }}</dd>
 {% endfor %}
 </dl>
+
+<p>And here is what it looks like as a jQuery accordion.</p>
+<div id="accordion">
+{% for band in object_list %}
+<h3><a href="#">{{ band.name }}</a></h3>
+<div>
+   {{ band.notes|linebreaksbr }}
+   <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">{{ band.name }} Website</a></p>
+</div>
+{% endfor %}
+</div>
+
 {% endblock %}