Hi Jim,
First of all, feel free to change this selector to match some more
meaningful HTML on your page:
$('div.demo-show:eq(0) ...
I doubt you'll need the :eq(0) part, and the "demo-show" class was
for a demo, so you can safely change that in the HTML and match the
change in the jQuery.
Now, on to your question. :-)
To avoid sliding up the divs that have a checked checkbox in them,
change this line ...
$(this).next('div:hidden').slideDown('fast').siblings
('div:visible').slideUp('fast');
to this ...
$(this).next('div:hidden').slideDown('fast').siblings('div:visible:not
(:has(input:checked))').slideUp('fast');
** will not work in jQuery version below 1.2. for 1.1.4.1 and below,
you would need to do this instead:
$(this).next('div:hidden').slideDown('fast').siblings('div:visible:not
([input:checked])').slideUp('fast');
Hope that gets you where you want to be.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 15, 2007, at 1:51 PM, Priest, James (NIH/NIEHS) [C] wrote:
-----Original Message-----
From: Karl Swedberg [mailto:[EMAIL PROTECTED]
Forgive me if you've already posted it, but would you mind
showing us the HTML? Labels can wrap around an input, but
they don't have to, so seeing what the relationship is
between the label and the input (checkbox) would help tremendously.
Karl - I've refactored this a bit after finding your show/hide example
on learningjquery.com:
HTML
==============================================
<div class="demo-show">
<cfoutput query="qryTopics" group="category">
<h3 class="right">#qryTopics.category#</h3>
<div class="details">
<cfoutput group="topic">
<div>
<label class="label"
for="topic_#qryTopics.topicid#"><input type="checkbox"
value="#qryTopics.topicid#" name="topic_#qryTopics.topicid#"
id="topic_#qryTopics.topicid#">
#qryTopics.topic#</label></div>
</cfoutput>
</div>
</cfoutput>
</div>
jQuery
==============================================
<script type="text/javascript">
$.fn.extend({
scrollTo : function(speed, easing) {
return this.each(function() {
var targetOffset = $(this).offset();
$('html,body').animate({scrollTop:
targetOffset}, speed, easing);
});
}
});
$(document).ready(function() {
$('div.demo-show:eq(0)> div:gt(0)').hide();
$('div.demo-show:eq(0)> h3').click(function() {
$(this).removeClass('right').addClass('down').siblings
('h3').removeClass
('down').addClass('right');
$(this).next('div:hidden').slideDown('fast').siblings
('div:visible:not(:has(input:checked))').sli
deUp('fast');
$(this).scrollTo(1000);
});
});
</script>
Now all I'd like to do is when the divs collapse - if there are
checked
items within it - keep them visible...
Jim
