Basically I have multiple classes called "sortable" and when they are clicked the div inside is suppose to slide out and in using slideToggle, this div has a class of "sectionDropDown" and this works. However every "sectionDropDown" div will then slide up and down each time any div with the class of "sortable".

 

Here is my Jquery code:

$(".sortable").click(function(e) 
{			
    $(".sectionDropDown").slideToggle();
});

How can I only slide the sectionDropDown where the sortable div was clicked and not slide all of the sectionDropDown divs?

 

$(".sortable").click(function(e) {			
  $(this).find(".sectionDropDown").slideToggle();
});

...should do it

 

EDIT: Fiddle here: https://jsfiddle.net/Nillervision/uagwLh7a/

Edited January 20, 201610 yr by Nillervision

Without seeing html it's hard to say but look up 'find', 'closest' and 'parent' methods in jQuery's DOM API.

 

P.S. use .on('click', function instead of .click(function

Here is part of the HTML:

<ul class="sortable" id="sortableSectionOne">
				
					<li id="link-1" class="linkSectionStyle">
						Test1
					
						<div class="sectionDropDown">
						
						</div>
					
					</li>
					
					<li id="link-2" class="linkSectionStyle">
						Test2
						
						<div class="sectionDropDown">
						
						</div>
						
					</li>

$(".sortable").click(function(e) {			
  $(this).find(".sectionDropDown").slideToggle();
});

...should do it

 

I tried this before and I got the same result.

I tried this before and I got the same result.

I updated my first answer with a fiddle. it works

Edited January 20, 201610 yr by Nillervision

I updated my first answer with a fiddle. it works

Arrh I was making a mistake. Instead of putting the sortable on inner div I was putting the sortable class on the wrapper that I had. So every time I clicked it was the wrapper, that's why all of them were sliding down.

 

Thanks for your help!

Edited January 20, 201610 yr by embluk

Looking at the code it looks like you want to attach the click event to ".linkSectionStyle" not ".sortable"

$(".linkSectionStyle").click(function(e) {			
  $(this).find(".sectionDropDown").slideToggle();
});

EDIT: I was typing this while you found the same answer your self. Glad you figured it out

Edited January 20, 201610 yr by Nillervision

Looking at the code it looks like you want to attach the click event to ".linkSectionStyle" not ".sortable"

$(".linkSectionStyle").click(function(e) {			
  $(this).find(".sectionDropDown").slideToggle();
});

EDIT: I was typing this while you found the same answer your self. Glad you figured it out

 

Hey, sorry to bother you again, your answer worked for me but I now have a different issue. Wondering if you could help me.

I have a HTML list like so:

<li id="link-1" class="linkSectionStyle">
							
	<div class="linkDropDownButton">
							
	   <img class="centerLinkButton" src="images/icons/smallDownArrow2.png">
							
	</div>
						
	<div class="sectionDropDown">
							
		<input name="1" type="text">						
	</div>					
</li>

The div with the class "linkDropDownButton" when clicked should then slide down the div with the class "sectionDropDown" and this is the Jquery code I am using:

$(".linkDropDownButton").on("click" ,function() 
{
					
	$(this).find(".sectionDropDown").slideToggle();
					
});

The above code will not work because the "sectionDropDown" div is not inside the "linkDropDown" div. I tried using .parent or looking into how to select outer elements but I could not get it to work. Could you point me in the right direction or do I need to take a different approach to this problem?

 

Also here is an example image of what the html looks like, the blue button in the top left when clicked should slide down sectionDropDown div.

 

Before being clicked:

 

After being clicked:

Edited January 21, 201610 yr by embluk

This maybe:

$(".linkDropDownButton").on("click" ,function() 
{
					
	$(this).next(".sectionDropDown").slideToggle();
					
});

 

This maybe:

$(".linkDropDownButton").on("click" ,function() 
{
					
	$(this).next(".sectionDropDown").slideToggle();
					
});

Yes! Thank you so much, it works! So does this work by basically saying look for the next element...?

Yes! Thank you so much, it works! So does this work by basically saying look for the next element...?

Yes the next() method will select the next sibling element (next element at same level in the DOM tree)

if you pass a parameter like the class name selector it will only select the element if the class matches.

https://api.jquery.com/next/