UPDATE for JLRiche
html structure below (here is the structure for the entire div id=content_body_right):
<div id="content_body_right">
<p class="user_text">Tim Flanagan</p><p class="date_text">02-06-2013 @ 12:00PM</p>
<p class="message_text">Playin Augusta today. What a beautiful course!</p>
<div id="activity_image">
<img src="images/activities/1/actimg.jpg" width="435" />
</div>
<div id="tips">
<div id="tip_cap_left">
<a href="dashboard.php?captip=tipyourcap" title="Tip Your Cap" ></a>
</div>
<div id="tip_cap_right">
<p class="tips_right">12 Tips of the Cap</p>
</div>
</div>
<p class="comments_label">
4 Comments
<a href="#" class="see_all" style="display:inline-block" title="See All Comments">see all</a>
<a href="#" class="collapse" style="display:none" title="Collapse Comments">collapse</a>
</p>
<div id="comment1">
<div id="comment_user_img">
<img src="images/defaultuserimg.jpg" width="30" height="30" />
</div>
<div id="comment_user">
<p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
<p class="message_text_comment">Nice jealous of you bro.</p>
</div>
</div>
<div class="comment2" style="display:none; clear:both; margin:0px; overflow:auto">
<div id="comment2_sub">
<div id="comment_user_img">
<img src="images/defaultuserimg.jpg" width="30" height="30" />
</div>
<div id="comment_user">
<p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
<p class="message_text_comment">Nice jealous of you bro.</p>
</div>
</div>
<div id="comment2_sub">
<div id="comment_user_img">
<img src="images/defaultuserimg.jpg" width="30" height="30" />
</div>
<div id="comment_user">
<p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
<p class="message_text_comment">Nice jealous of you bro.</p>
</div>
</div>
<div id="comment2_sub">
<div id="comment_user_img">
<img src="images/defaultuserimg.jpg" width="30" height="30" />
</div>
<div id="comment_user">
<p class="user_text_comment">Tim Flanagan</p><p class="date_text_comment">02-06-2013 @ 12:00PM</p>
<p class="message_text_comment">Nice jealous of you bro.</p>
</div>
</div>
</div>
</div>
Let me know if you need more structure, because there is alot above and below it. Hope this helps. I really appreciate your help!
END UPDATE
Good Evening All,
I need to dynamically create X amount of jquery scripts foreach of the X amount of db results. X meaning the the number will vary. It is sort of a forum type thing where you see the original post with one reply showing and you would click see all or collapse all to view or collapse the rest. I am incrementing my html elements inside a foreach loop with the typical $i variable so I need to output jquery click functions for each as well.
The code I need PHP to create is below:
$jquery .= "$('#see_all$i').click(function () {
$('#comment2_$i').slideDown('fast');
$('#collapse$i').css('display', 'inline-block');
$('#see_all$i').css('display', 'none');
return false;
});
$('#collapse$i').click(function () {
$('#comment2_$i').slideUp('fast');
$('#collapse$i').css('display', 'none');
$('#see_all$i').css('display', 'inline-block');
return false;
})";
Any help would and always will be much appreciated!
Thanks
Generating multiple, slightly different copies of the same jQuery code is not a very good design, IMHO. You should write your jQuery code in a way that it only needs to be in your page once, like:
$('.see_all').click(function(){
var thisItem = $(this);
thisItem.parent().find('.comment').slideDown('fast');
thisItem.parent().find('.collapse').css('display','inline-block');
thisItem.css('display','none');
return false;
});
$('.collapse').click(function(){
var thisItem = $(this);
thisItem.parent().find('.comment').slideUp('fast');
thisItem.css('display','none');
thisItem.parent().find('.see_all').css('display','inline-block');
return false;
})";
Of course, this would also involve adding collapse
, see_all
, and comment
classes to the relevant HTML elements.
html :
<div class="seeall" data-elid="1">...</div>
...
<div class="collapse" data-elid="1">...</div>
...
js :
var $bdy=$(document.body)
$bdy.on("click",".seeall",function(e) {
var el=$(this).css('display','none').data("elid");
$('#comment2_'+el).slideDown('fast');
$('.collapse[data-elid="'+el+'"]').css('display','inline-block');
})
.on("click",".collapse", function(e) {
//same same
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.