Search jQuery

jQuery Forum

Getting Started

Snitz

Show/Hide div based on "data-parent-id" tag

in Getting Started • 9 years ago

Hello,

This is my url

http://maghnatis.socialengine.com

I'm trying to make all comments on all posts to be hidden on page load of my frontpage. When user hovers over ".comments_wrapper" the .comments_list will show.

I'm using the following JS

$(document).ready(function(){
$(".comments_list").hide();
$(".comments_wrapper").show();
$('.comments_wrapper').hover(function(){
var parentId = $(this).data('data-parent-id');
$(".comments_list").slideToggle()
});
});

And this is the HTML

<div class="comments_wrapper ui-comment" data-parent-type="post" data-parent-id="400885" data-parent-url="post/400885/" data-parent-user-id="86217" data-comment-offset="3" data-comment-total="9" data-comment-order="score DESC" data-view="feed" data-vote-types="vote" data-deletes="true">
<ul class="comments_list" style="display: none;">
<li class="comment depth_0 admin" data-comment-id="267683" data-viewer-value="0" data-total-likes="1" data-total-dislikes="0" data-depth="0" data-total-comments="0"></li>
</ul>

But the problem is, when I hover over the .comments_wrapper, all comments on all posts appear, not just the post I'm focused on.

Replies(2)

kbwood.au

Re: Show/Hide div based on "data-parent-id" tag

9 years ago

I'm assuming that the .comments_wrapper div encloses the .comments_list. Then you just need to restrict the selector to the list contained in the current div. You may want to include a stop call to prevent the queuing of multiple hovers.

$(function() { // Shorthand for $(document).ready(function() {
$('.comments_list').hide();
$('.comments_wrapper').show().
hover(function() {
$('.comments_list', this).stop(true, true).slideToggle();
});
});

Snitz

Re: Show/Hide div based on "data-parent-id" tag

9 years ago

Thank you very much. That did it!

Just a silly question, when I hover over the comments box now, the comments appear but the transition is not smooth.

I mean it's taking too much time to load the comment and it does it on 2 stages, as if it is stuck or the load is too heavy.

Is there any way to make it smoother?

Top Reply

Response title

Attachments

jQuery Forum

Show/Hide div based on "data-parent-id" tag

Replies(2)

Re: Show/Hide div based on "data-parent-id" tag

Re: Show/Hide div based on "data-parent-id" tag

Statistics

Tags

Actions