CODEWITHSUNDEEP
javascriptjquerythis
Colin R. Jones
Colin R. Jones

Reputation: 11

How to select particular element with class in jQuery using 'this'

I am trying to create dropdowns with jQuery. Each dropdown is part of the same class. As you can see, as of right now when you click the header with the '.socialheader' class, it toggles the visibility of the '.socialsub' class. How do I use the 'this' keyword to only toggle the visibility on the particular element clicked? I realize that I could use id's instead of a class for each element in the .socialsub class, but I assume there's a more concise way to do the same thing.

jQuery in question:

$(document).ready(function(){
$('.socialsub').hide();
$('.socialheader').click(function(){
      $('.socialsub').slideToggle();
});//SHOWS AND HIDES SOCIALSUB CLASS
});

HTML (in part):

<h2 class='socialheader'> Green Great Dragons </h2>
   <div class='socialsub'> 


       <h3> Facebook  </h3>
       <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a>


    <br />   
    <br />  

       <h3> Bandcamp </h3>

       <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a>


    <br />  
    <br />  
    </div> 


   <h2 class='socialheader'> Colin Jones </h2>
   <div class='socialsub'> 

       <h3> Twitter </h3>
       <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a>


     <br />  


       <h3> Instagram </h3>   
       <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a>


       <h3> YouTube </h3>
       <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a>


     <br />    
     <br />

Upvotes: 0

Views: 38

Answers (4)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

Do it like below:-

$(document).ready(function(){
   $('.socialsub').hide();
   $('.socialheader').click(function(){ // you missed $
     $(this).next('.socialsub').slideToggle();
   });
}); // missed in your code

Example:-

$(document).ready(function(){
 $('.socialsub').hide();
 $('.socialheader').click(function(){ // you missed $
   $(this).next('.socialsub').slideToggle();
 });
}); // missed in your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2 class='socialheader'> Green Great Dragons </h2>
<div class='socialsub'> 
	<h3> Facebook  </h3>
	   <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a>
	<br />   
	<br />  
	   <h3> Bandcamp </h3>
	   <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a>
	<br />  
	<br />  
</div> 

<h2 class='socialheader'> Colin Jones </h2>
<div class='socialsub'> 
	<h3> Twitter </h3>
	<a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a>
	<br />  
   <h3> Instagram </h3>   
   <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a>
   <h3> YouTube </h3>
   <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a>
	<br />    
	<br />
</div>

Upvotes: 1

Kyle Brown
Kyle Brown

Reputation: 21

I recommend something like this

$(document).on('click','.socialheader',function(){
  if($('.socialsub').is(":visible")){
    $('.socialsub').hide();
  }else{
    $('.socialsub').show();
  }
});

If you ever dynamically create elements in the on click function this way will bind them correctly.

Upvotes: 0

Kristianmitk
Kristianmitk

Reputation: 4778

if I get you right then what you are looking for is:

$('.socialheader').click(function() {
    $(this).slideToggle();
});

Upvotes: 0

clabe45
clabe45

Reputation: 2454

You're almost there... simply substitute the selector string with this:

$(document).ready(function(){
   $('.socialsub').hide();
   $('.socialheader').click(function(){
      $(this).slideToggle();
   });//SHOWS AND HIDES *THIS* SOCIALSUB CLASS
});

Upvotes: 0

Related Questions