I'm currently working on making a timeline for a website page that displays the years and then when clicked it should open up and display what happened in those years and keep the other stuff from other years hidden. For some reason my jquery is doing the opposite it keeps what i click on and hides every other year and their data.

Here is my HTML

<div class="timeline">
    <ul>
        <li class="timeli">1996
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1997
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">Test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1999
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
    </ul>
</div>

Here is my jquery I guess my problem is that i dont fully understand the .sibling in jquery.

$(document).ready(function(){
    $(".timeli").click(function(){
        $(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
    });
});

HERE IS THE EDIT FOR ANSWER it works perfectly for me thanks for the help!

$(document).ready(function(){
        $(".timeli").click(function(){
        $(this).find($(".timeUlSub")).slideToggle("slow", function(){});
    });});

I'm currently working on making a timeline for a website page that displays the years and then when clicked it should open up and display what happened in those years and keep the other stuff from other years hidden. For some reason my jquery is doing the opposite it keeps what i click on and hides every other year and their data.

Here is my HTML

<div class="timeline">
    <ul>
        <li class="timeli">1996
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1997
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">Test</p>
                </li>
            </ul>
        </li>
        <li class="timeli">1999
            <ul class="timeUlSub">
                <li>
                    <div class="arrow-up"></div>
                    <p class="timeline-description">test</p>
                </li>
            </ul>
        </li>
    </ul>
</div>

Here is my jquery I guess my problem is that i dont fully understand the .sibling in jquery.

$(document).ready(function(){
    $(".timeli").click(function(){
        $(this).siblings($(".timeUlSub")).slideToggle("slow", function(){});
    });
});

HERE IS THE EDIT FOR ANSWER it works perfectly for me thanks for the help!

$(document).ready(function(){
        $(".timeli").click(function(){
        $(this).find($(".timeUlSub")).slideToggle("slow", function(){});
    });});

• javascript
• jquery
• html
• element

Share Improve this question Follow edited Apr 28, 2015 at 13:39 Alex Beyer asked Apr 28, 2015 at 13:31 Alex BeyerAlex Beyer 14711 silver badge88 bronze badges 1

• 3 $(this).siblings($(".timeUlSub")) The $(".timeUlSub") makes no sense. Thinking you want find... – epascarello Commented Apr 28, 2015 at 13:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

timeUlSub is the child of timeli, and not sibling (same-level elements). Use find() or children()

 $(this).find(".timeUlSub").slideToggle("slow", function(){});

or

 $(this).children(".timeUlSub").slideToggle("slow", function(){});

Note : children() searches for first-level children only, find() searches children, grand-children and so on.

.timeUlSub is child of clicked li element. thus you need to use .find() instead of .siblings().You also do not need the jquery object, you can simply use the selector for required element:

  $(this).find(".timeUlSub").slideToggle("slow", function(){});

Complete Click Event:

$(".timeli").click(function(){
      $(this).find(".timeUlSub").slideToggle("slow", function(){});
});

I believe you want to hide the child ul of the other elements, but also show those of the one that has been clicked...

$(document).ready(function () {
    $(".timeli").click(function () {
        $(this).siblings().find(".timeUlSub").hide("slow");
        $(".timeUlSub", this).show("slow");
    });
});

This behaviour is "open the one I click and hide the rest".

If you want "toggle the one I click", you don't need to worry about siblings at all.

$(".timeUlSub", this).slideToggle("slow");

See it in action on JSFiddle, or the second version.

.timeUlSub is not a sibling, rather a child element of .timeli.

You should refactor your code to:

$(".timeli").click(function(){

    $(this).find(".timeUlSub").slideToggle("slow", function(){});

});

And an even better implementation would be to delegate the click:

$(document).on("click", ".timeli", function(){

    $(this).find(".timeUlSub").slideToggle("slow", function(){});

});