> -----Original Message-----
> From: Priest, James (NIH/NIEHS) [C]
> Last question - would it be possible to have it collapse the
> checkboxes
> both when you click on the parent H3 or any other H3 (as it does now)?
> That may not be possible but what do I know :) I'm going to show this
> as it is now which may be good enough...
Actually I'm tinkering with Karl's latest example with a greater data
set (eventually there may be 100 checkboxes in each topic) - and the
only problem is that Topics with NO checked items don't collapse... I
had this sort of working with my attempt at hacking your show/hide
accordian code (from learningjquery.com) but I'm stuck at the point
where I collapse things and hide the unchecked items... hence my color
change experiment below...
<script type="text/javascript">
// scrollTo: function will scroll the page back to the top when
a user collapses a div near the bottom of the page
$.fn.extend({
scrollTo : function(speed, easing) {
return this.each(function() {
var targetOffset = $(this).offset();
$('html').animate({scrollTop: targetOffset},
speed, easing);
});
}
});
$(document).ready(function() {
// toggle the visibility of each topic when another is selected
$('div.topiclist> h3').click(function() {
// call custom function to scroll up
$(this).scrollTo();
// switch graphic indicator
$(this).removeClass('right').addClass('down').siblings('h3').removeClass
('down').addClass('right');
// hide unchecked items (for testing those are red)
$(this).next('div:hidden').slideDown('fast').siblings('div:visible:not(:
has(input:checked))').slideUp('fast').siblings().find('input:checkbox').
not(':checked').parent().css('color', 'red');
</script>
I'm trying to write this out so it makes sense (for you and me) :)
-------------------
1) When the page initially loads - the topics list is collapsed with
only the first topic expanded showing the list of unchecked items (this
assumes ALL checkboxes are unchecked initially).
Topic 1
0 item 1
0 item 2
Topic 2
Topic 3
-------------------
2) User then selects Topic 2
Topic 1
Topic 2
0 item 1
0 item 2
Topic 3
-------------------
3) User checks item 2 - then selects Topic 3
Topic 1
Topic 2
x item 2
Topic 3
0 item 1
0 item 2
-------------------
4) User selects Topic 1
Topic 1
0 item 1
0 item 2
Topic 2
x item 2
Topic 3
-------------------
5) User checks item 1 & 2 then selects Topic 2
Topic 1
x item 1
x item 2
Topic 2
0 item 1
x item 2
Topic 3
-------------------
Does that even remotely make sense????????
Jim
