3

ive been trying to do some research but I cant seem to find the specific answer for this..

I have the following HTML

<div class="collapsingHeader">
    <div class="listItemWrapper">
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
    </div>
 </div>
<div class="collapsingHeader">
    <div class="listItemWrapper">        
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
        <div class="itemWrapper">
            <div class="itemImage"></div>
            <div class="itemLabel"></div>
        </div>
    </div>
 </div>

Now, as you can see, i have 2 collapsingHeaders, each with a listItemWrapper, which contains 2 itemWrapper, which each contain an image and a label.

I am using javascript to, when clicking on a 'collapsingHeader' class, to hide the .next element (which is the listItemWrapper container below it).

The problem I am having here, is that there is a slight bad animation when the itemImage collapses/hides with the container. So I am looking to further, when the listItemWrapper container is toggled to show/hide, to further target the 2 child itemImage classes and set their display:none.

So my thinking was something like, when the use clicks on a collapsingHeader class to..

$(this).next().children('.itemImage')

and then updating the css/class of each. But the above code isnt working as expected, and I think Im not using it correctly..

any ideas how to target certain child elements (deep) within a container div?

Thanks!

1
  • 1
    use $(this).children('.itemImage').hide() or $(this).find('.itemImage').hide() May 28, 2015 at 7:48

2 Answers 2

4

Using jQuery find() you can find any element (based on type, class or id) within the $(this) element:

Simply change:

$(this).next().children('.itemImage')

to:

$(this).find('.itemImage').hide()
1
  • 3
    Thank you very much Friendly Crook, your answer is spot on right. :) Unfortunately could only mark 1 as the answer. >.<
    – Simon
    May 28, 2015 at 12:07
3

use below code . to find children you don't need to use next(). use find()

$(this).find('.itemImage').hide();  

 or 

$(this).children('.itemImage').hide();
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.