Show specific link to link div for this html hierarchy

Question

This is my .html code

 <div class="col-2"> 
       <div class="col-content">
         <div class="lt">
           <div class="lt-img arch"></div>
          </div>
          <div class="rt">                  
                <h3>Competitve Prices</h3>
                 <p>Arch Linux 2012.12 x64</p>
                 <a href="">Read more <div class="arrow"></div></a>                   
           </div>
                    <div class="clearfix"></div>
           <div class="wholebox">
                    <ul>
                       <li>Arch Linux 2012.12 x64</li>
                        <li>Arch Linux 2012.08 x64</li>
                        <li>Arch Linux 2012.08 x86</li>
                    </ul>
           </div>
       </div>
     </div>

I have a .js code here.

 $( ".rt a" ).click(function() {
   $( ".wholebox" ).slideToggle( "slow" );
   return false;
  });

Problem : When I click on the link, it shows all wholeboxdivs that have a class .In .cssfile. I set the property to display:nonefor this class wholebox. As I can wholeboxonly show for a specific link with this code hierarchy HTML.

Answer 1

$('.rt a').click(function() {
    $(this).closest('.col-content').find('.wholebox').slideToggle('slow');
    return false;
});

Answer 2

Try the following:

 $( ".rt a" ).click(function() {
  //first look for <div class="col-content"> and find class .wholebox
   $(this).parent().parent().find(".wholebox").slideToggle( "slow" );
   return false;
  });

Answer 3

> .

. . id <a href="" data-id="1"> <div class="wholebox**1**">

<div class="col-2"> <div class="col-content"> <div class="lt"> <div class="lt-img arch"></div> </div> <div class="rt">
<h3>Competitve Prices</h3> <p>Arch Linux 2012.12 x64</p> <a href="" data-id="1">Read more <div class="arrow"></div></a>
</div> <div class="clearfix"></div> <div class="wholebox1"> <ul> <li>Arch Linux 2012.12 x64</li> <li>Arch Linux 2012.08 x64</li> <li>Arch Linux 2012.08 x86</li> </ul> </div> </div> </div>

 $( ".rt a" ).click(function() {
     $( ".wholebox"+($(this).attr("data-id")) ).slideToggle( "slow" );
     return false;
  });