Question

Please take a look at below codes, for whatever reason I am unable to open one div only when I click on the edit link, it opens all divs when I click the edit link. This is what I have:

( function($) {
    $(document).ready(function() {
        // hides the slickbox as soon as the DOM is ready
        $('.slickbox').hide();           
        // toggles the slickbox on clicking the noted link  
        $('.slick-toggle').click(function() {
        $('.slickbox').toggle(400);
        return false;
        });
    });
} ) ( jQuery );

Here is the HTML part:

<li id="list_47">
<div>
    <div id="row">
        <div class="title id="bannerid59"><img src="banner_45_10.jpg" /></div>
        <div class="action"><a href="#" class=".slick-toggle">Edit</a></div>
    </div>
    <div id="row-right">
        <span class="small">Sort Order: 2</span><br>
    </div>
</div>
<div class="slickbox">blah blah box 1</div>
</li>

<li id="list_48">
<div>
    <div id="row">
        <div class="title id="bannerid60"><img src="banner_45_11.jpg" /></div>
        <div class="action"><a href="#" class=".slick-toggle">Edit</a></div>
    </div>
    <div id="row-right">
        <span class="small">Sort Order: 2</span><br>
    </div>
</div>
<div class="slickbox">blah blah box 2</div>
</li>

I have looked through other examples or solutions with no luck (such as replacing $(‘.slickbox’).toggle(400); with $(this).next(“.slickbox”).slideToggle(400);)

Any pointer is greatly appreciated. thanks.

Answer 1

(function($) {
  $(document).ready(function() {
    $('.slickbox').hide();           
    $('.slick-toggle').click(function() {
    $('.slickbox', $(this).parents("li")).toggle(400);
    return false;
    });
  });
}) ( jQuery );