CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arif Hussain
Arif Hussain

Reputation: 157

Show particular div on click on link for this html hierarchy

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 .js file code here ..

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

Problem : When i click on link it show all div having classwholebox.In .css file i set property to display:none for this wholebox class.How can i show wholebox only for particular link with this hierarchy of HTML code .

Upvotes: 4

Views: 274

Answers (3)

Sujit Patil
Sujit Patil

Reputation: 183

Give some data-id to your tag and map that id to your "wholebox" class.

Refer below code. Only need to collect id from <a href="" data-id="1"> and map it to <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;
  });

Upvotes: 0

jyrkim
jyrkim

Reputation: 2869

Try sth like 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;
  });

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

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

Upvotes: 2

Related Questions