Home/ Questions/Q 6780865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:33:23+00:00

On my website I have several hidden div’s with comments. Each comment div is

  • 0

On my website I have several hidden div’s with comments. Each comment div is for a

different article. Then I have a link which calls a jQuery UI function that expands hidden

div’s.

Here is an example http://jsfiddle.net/g7LwM/18/

The problem, as you can see, is that it expands all hidden div’s, where as I only need to

expand one which is related to a article. I can give an id of the article to each hidden

div e.g. .commentsBox 1 , .commentsBox 2 , .commentsBox 3 But I don’t know how to modify

jQuery function so it only expands a .commentsBox with a certain id. So this is my

question, How do I need to modify the code so when I click a .st_commentsa link of the article, it expands a hidden .comentsBox of that same article only?

Full code:

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(".st_commentsa").toggle(function() {
        $(".comentsBox").show("slide", {
            direction: "up"
        }, 200);
    }, function() {
        $(".fb-comments").hide("slide", {
            direction: "up"
        }, 200);
    })

})
</script>

</head>

<body>

<ul>
<li><a href="#" class="st_id">Click me</a></li>
<li><a href="#" class="st_time">Click me</a></li>
<li><a href="#" class="st_author">Click me</a></li>
<li><a href="#" class="st_verification">Click me</a></li>
</ul>
<div class="commentsBox 1" style="display: none;"><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>

<br /><br />

<ul>
<li><a href="#" class="st_id">Click me</a></li>
<li><a href="#" class="st_time">Click me</a></li>
<li><a href="#" class="st_author">Click me</a></li>
<li><a href="#" class="st_verification">Click me</a></li>
<li><a href="#" class="st_comments">Click me</a></li>
</ul>
<div class="commentsBox 2" style="display: none;"><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(document).ready(function() {
    $(".st_comments").toggle(function() {
        $(this).closest('ul').next('div.commentsBox').show("slide", {
            direction: "up"
        }, 300);
    }, function() {
        $(this).closest('ul').next('div.commentsBox').hide("slide", {
            direction: "up"
        }, 300);
    })
})

    I use the closest(‘ul’) has it helps jquery find the thing. the commentsBox div is next to the list element, not the ‘a href’ one (the one clicked). This method is cleaner, and offers better performance too.

    EDIT and for your second html:

    $(document).ready(function() {
    $('li > a').toggle(function() {
        $(this).closest('ul').next('div.commentsBox').show("slide", {
            direction: "up"
        }, 300);
    }, function() {
        $(this).closest('ul').next('div.commentsBox').hide("slide", {
            direction: "up"
        }, 300);
    })
})
    • 0