[jQuery] changing the initial state of toggle based on a condition.
Hi all,
This is my first post to this forum and I apologize in advance if I don't
explain my problem adequately. I have series of list DIVs, and the display
of these lists is controlled by a title DIV. When a list is empty I'm
setting a class on the title DIV "empty" I was hoping to set a condition in
the toggle to collapse/hide the list DIV if it is empty. Can anyone tell me
the best what to do this? See sample of the code below. NOTE: this is not
the actual code but I've verified that this code works.
<script type="text/javascript"
src="/predictive/public/scripts/default/jquery-1.3.2.min.js"></script>
<style type="text/css" media="screen">
/* related eplays box */
.related_eplays_content {background-color:#d5cebf;border:1px solid
#b4ac99;height:26px;width:648px;margin-top:5px;clear: both;}
.related_eplays_container .icon-subscribe
{display:block;width:16px;height:16px;margin:6px;background:transparent
url('/images/default/bg-tag-icons.png') no-repeat 0 0;}
.off {background-position:0 -17px !important;}
.related_eplays_container .arrow {background:transparent
url("orange_brown-arrow.png") no-repeat 0
-42px;padding-top:1px;padding-left:20px;color:#575455;font-weight:bold;cursor:pointer;height:18px;width:510px;margin-top:6px;}
.play_buttons {text-align:right;margin-top:4px;width:110px;}
.play_buttons a {font-weight:bold;color:#524d43;text-decoration:none;}
.related_eplays_list {width:98%;margin-left:10px;display:block;}
.related_eplays_detail {height:55px;margin:4px
0;clear:both;padding-left:8px;cursor:pointer;border:1px solid #e5e1d8;}
.related_eplays_thumb {height:41px;width:47px;float:left;margin:5px 8px 5px
0;}
.related_eplays_thumb img {border:1px solid #FFF;}
.related_eplays_text {padding:20px 0;}
.related_eplays_tags {background-color:#F7F2EC;border-left:1px solid
#C2B5A7;border-right:1px solid #C2B5A7;padding:5px 0 0 0;border-top:1px
solid #d4d0c7;}
.tag_label{font-weight:bold;width:35px;margin:0;padding-top:10px;text-align:right;}
.tag-list {background:transparent url('orange_bg-dotted.png') repeat-y 40px
0;padding:5px 8px 0 48px;}
.tag-list a {color:#564d43;}
</style>
<script language="javascript">
$(document).ready(function() {
/* jQuery function to toggle display of content */
$('.arrow').toggle(function(){
if ( $(this).hasClass("empty") ){console.log("empty");}
var view = $(this).attr('view');
$(this).css("background-position","0 -22px");
$('#show-'+view).slideUp('slow');
},function(){
var view = $(this).attr('view');
$(this).css("background-position","0 -42px");
$('#show-'+view).slideDown('slow');
});
});
</script>
<div class="related_eplays_container">
<div class="related_eplays_content">
<div class="arrow left" view="141">
sarah michelle gellar
</div>
<div class="play_buttons left" align="right">
#
</div>
</div>
<div class="related_eplays_list" id="show-141">
<div
onclick="reltagsElementClicked('/index/poll/id/3612/category/entertainment/Freddie-Prinze-Jr-joining-the-cast-of-happy-shocked-bad-choice');"
class="related_eplays_detail odd">
<div class="related_eplays_thumb img-border">
http://predictive.eplay.local/media/eplay/thumbs/img_Y44hr9.jpg
</div>
<div class="related_eplays_text">
Freddie Prinze, Jr. joining the cast of "24" – happy, shocked,
bad choice?
</div>
</div>
<div
onclick="reltagsElementClicked('/index/poll/id/3567/category/entertainment/Would-you-watch-a-Buffy-the-Vampire-Slayer-movie-with-an-all-new-cast');"
class="related_eplays_detail even">
<div class="related_eplays_thumb img-border">
http://predictive.eplay.local/media/eplay/thumbs/img_bV8y9G.jpg
</div>
<div class="related_eplays_text">
Would you watch a "Buffy the Vampire Slayer" movie with an all
new cast?
</div>
</div>
<div
onclick="reltagsElementClicked('/index/poll/id/2181/category/entertainment/Will-you-watch-Sarah-Michelle-Gellars-new-HBO-Series-The-Wonderful-Maladys');"
class="related_eplays_detail odd">
<div class="related_eplays_thumb img-border">
http://predictive.eplay.local/media/eplay/thumbs/img_MSM8CW.jpg
</div>
<div class="related_eplays_text">
Will you watch Sarah Michelle Gellar's new HBO Series "The Wonderful
Maladys"?
</div>
</div>
<div
onclick="reltagsElementClicked('/index/poll/id/578/category/entertainment/What-is-Sarah-Michelle-Gellar-thinking');"
class="related_eplays_detail even">
<div class="related_eplays_thumb img-border">
http://predictive.eplay.local/media/eplay/thumbs/img_m6KQqi.jpg
</div>
<div class="related_eplays_text">
What is Sarah Michelle Gellar thinking?
</div>
</div>
</div>
<!-- related_eplays_list-141 -->
<div class="related_eplays_content">
<div class="arrow left empty" view="5969">
alyson hannigan
</div>
<div class="play_buttons left" align="right">
#
</div>
</div>
<div class="related_eplays_list" id="show-5969">
</div>
<!-- related_eplays_list-5969 -->
</div>
--
View this message in context: http://www.nabble.com/changing-the-initial-state-of-toggle-based-on-a-condition.-tp24277050s27240p24277050.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.