jQuery & DOM Manipulation

Traversing Sideways (Siblings)

12 min Lesson 8 of 30

Understanding Sibling Traversal

Sibling traversal allows you to navigate horizontally across the DOM tree - moving between elements that share the same parent. These are called sibling elements.

Sibling methods are incredibly useful for building interfaces where elements need to interact with their neighbors, such as tabs, carousels, navigation menus, and form fields.

What Are Siblings?

HTML Structure:
<div class="parent">
    <p>First child</p>        <!-- Sibling of the div and span -->
    <div>Second child</div>   <!-- Sibling of the p and span -->
    <span>Third child</span>  <!-- Sibling of the p and div -->
</div>

All three elements (p, div, span) are siblings because they share the same parent (.parent). They are at the same level in the DOM tree.

Note: Siblings are elements at the same level with the same parent. They are neither ancestors nor descendants of each other.

The siblings() Method

The siblings() method returns all siblings of each element in the matched set, excluding the element itself.

HTML:
<ul class="menu">
    <li class="item">Home</li>
    <li class="item active">Products</li>
    <li class="item">About</li>
    <li class="item">Contact</li>
</ul>

jQuery:
// Get all siblings of the .active item (returns Home, About, Contact)
$(".active").siblings();

// Get only li siblings (same as above in this case)
$(".active").siblings("li");

// Get siblings with a specific class
$(".active").siblings(".item");

// Remove class from all siblings
$(".active").siblings().removeClass("active");

Tip: siblings() is perfect for implementing "one active at a time" patterns like tabs, where clicking one tab deactivates all others.

The next() Method

The next() method returns the immediate next sibling of each element. It only goes one element forward.

HTML:
<div class="steps">
    <div class="step" data-step="1">Step 1</div>
    <div class="step" data-step="2">Step 2</div>
    <div class="step" data-step="3">Step 3</div>
</div>

jQuery:
// Get the next sibling of step 1 (returns step 2)
$("[data-step='1']").next();

// Get next sibling if it has a specific class
$("[data-step='1']").next(".step");

// Add class to the next step
$("[data-step='1']").next().addClass("active");

The nextAll() Method

The nextAll() method returns all following siblings of each element, not just the immediate next one.

HTML:
<div class="list">
    <div class="item">Item 1</div>
    <div class="item current">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

jQuery:
// Get all siblings after .current (returns Item 3 and Item 4)
$(".current").nextAll();

// Get only divs that come after
$(".current").nextAll("div");

// Style all following items
$(".current").nextAll().css("opacity", "0.5");

The nextUntil() Method

The nextUntil() method returns all following siblings up to (but not including) a specified element. This is useful for selecting a range of elements.

HTML:
<div class="content">
    <h2 class="start">Section 1</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <h2 class="end">Section 2</h2>
    <p>Paragraph 3</p>
</div>

jQuery:
// Get all elements between .start and .end (returns both paragraphs)
$(".start").nextUntil(".end");

// Hide all paragraphs until the next h2
$(".start").nextUntil("h2").hide();

// Select paragraphs only
$(".start").nextUntil(".end", "p").addClass("section-content");

The prev() Method

The prev() method returns the immediate previous sibling of each element. It's the opposite of next().

HTML:
<div class="carousel">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide active">Slide 3</div>
</div>

jQuery:
// Get the previous slide (returns Slide 2)
$(".active").prev();

// Show the previous slide
$(".active").prev(".slide").fadeIn();

The prevAll() Method

The prevAll() method returns all previous siblings of each element.

HTML:
<div class="tasks">
    <div class="task">Task 1</div>
    <div class="task">Task 2</div>
    <div class="task completed">Task 3</div>
    <div class="task">Task 4</div>
</div>

jQuery:
// Get all tasks before .completed (returns Task 1 and Task 2)
$(".completed").prevAll();

// Mark all previous tasks as done
$(".completed").prevAll(".task").addClass("done");

The prevUntil() Method

The prevUntil() method returns all previous siblings up to (but not including) a specified element.

HTML:
<form>
    <input type="text" name="first">
    <input type="text" name="middle">
    <input type="email" name="email">
    <input type="text" name="last">
</form>

jQuery:
// Get all inputs from email back to (but not including) first
$("[name='email']").prevUntil("[name='first']");

// Validate all fields before email
$("[name='email']").prevUntil(":first").each(function() {
    if ($(this).val() === "") {
        $(this).addClass("error");
    }
});

Practical Example: Tab Navigation

HTML:
<div class="tabs">
    <div class="tab-nav">
        <button class="tab-btn active" data-tab="home">Home</button>
        <button class="tab-btn" data-tab="profile">Profile</button>
        <button class="tab-btn" data-tab="settings">Settings</button>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="home">Home content</div>
        <div class="tab-pane" id="profile">Profile content</div>
        <div class="tab-pane" id="settings">Settings content</div>
    </div>
</div>

jQuery:
$(".tab-btn").on("click", function() {
    // Remove active from all siblings
    $(this).siblings().removeClass("active");

    // Add active to clicked tab
    $(this).addClass("active");

    // Get the tab ID
    var tabId = $(this).data("tab");

    // Hide all tab panes and show the selected one
    $("#" + tabId).addClass("active")
                  .siblings().removeClass("active");
});

Practical Example: Image Carousel

HTML:
<div class="carousel">
    <button class="prev-btn">←</button>
    <div class="carousel-track">
        <div class="carousel-slide"><img src="img1.jpg"></div>
        <div class="carousel-slide active"><img src="img2.jpg"></div>
        <div class="carousel-slide"><img src="img3.jpg"></div>
    </div>
    <button class="next-btn">→</button>
</div>

jQuery:
// Next button
$(".next-btn").on("click", function() {
    var current = $(".carousel-slide.active");
    var next = current.next(".carousel-slide");

    if (next.length) {
        current.removeClass("active");
        next.addClass("active");
    } else {
        // Loop back to first slide
        current.removeClass("active");
        $(".carousel-slide").first().addClass("active");
    }
});

// Previous button
$(".prev-btn").on("click", function() {
    var current = $(".carousel-slide.active");
    var prev = current.prev(".carousel-slide");

    if (prev.length) {
        current.removeClass("active");
        prev.addClass("active");
    } else {
        // Loop to last slide
        current.removeClass("active");
        $(".carousel-slide").last().addClass("active");
    }
});

Practical Example: Accordion Menu

HTML:
<div class="accordion">
    <div class="accordion-item">
        <h3 class="accordion-header">Section 1</h3>
        <div class="accordion-body">Content 1</div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">Section 2</h3>
        <div class="accordion-body">Content 2</div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">Section 3</h3>
        <div class="accordion-body">Content 3</div>
    </div>
</div>

jQuery:
$(".accordion-header").on("click", function() {
    var item = $(this).parent();
    var body = $(this).next(".accordion-body");

    // Toggle current accordion
    body.slideToggle();
    item.toggleClass("active");

    // Close all other accordions (siblings)
    item.siblings(".accordion-item").removeClass("active")
        .find(".accordion-body").slideUp();
});

Practical Example: Multi-Step Form

HTML:
<div class="wizard">
    <div class="wizard-step active">
        <h3>Step 1: Personal Info</h3>
        <input type="text" name="name">
        <button class="next-step">Next</button>
    </div>
    <div class="wizard-step">
        <h3>Step 2: Address</h3>
        <input type="text" name="address">
        <button class="prev-step">Back</button>
        <button class="next-step">Next</button>
    </div>
    <div class="wizard-step">
        <h3>Step 3: Confirmation</h3>
        <button class="prev-step">Back</button>
        <button class="submit">Submit</button>
    </div>
</div>

jQuery:
// Next step
$(".next-step").on("click", function() {
    var currentStep = $(this).closest(".wizard-step");
    var nextStep = currentStep.next(".wizard-step");

    if (nextStep.length) {
        currentStep.removeClass("active");
        nextStep.addClass("active");
    }
});

// Previous step
$(".prev-step").on("click", function() {
    var currentStep = $(this).closest(".wizard-step");
    var prevStep = currentStep.prev(".wizard-step");

    if (prevStep.length) {
        currentStep.removeClass("active");
        prevStep.addClass("active");
    }
});

Chaining Sibling Methods

You can chain sibling methods together for complex navigation patterns.

Examples:
// Get the next 3 siblings
$(".start").next().next().next();

// Better: use nextAll() with slice
$(".start").nextAll().slice(0, 3);

// Get previous sibling's previous sibling
$(".current").prev().prev();

// Get all siblings except the current
$(".current").siblings();

// Hide current and all following
$(".current").add($(".current").nextAll()).hide();

Common Mistake: Remember that siblings() excludes the element itself. If you need to include the current element, use $(".current").add($(".current").siblings()).

Comparison Table

Method	Direction	Returns	Best Used For
`siblings()`	Both	All siblings	Deactivating other tabs/items
`next()`	Forward	Next sibling only	Moving to next item
`nextAll()`	Forward	All following siblings	Batch operations forward
`nextUntil()`	Forward	Siblings until a point	Selecting a range forward
`prev()`	Backward	Previous sibling only	Moving to previous item
`prevAll()`	Backward	All previous siblings	Batch operations backward
`prevUntil()`	Backward	Siblings until a point	Selecting a range backward

Practice Exercise

Scenario: Build a pricing table where selecting one plan deselects others and shows a comparison.

HTML Structure:

<div class="pricing">
    <div class="plan-card" data-plan="basic">
        <h3>Basic</h3>
        <p class="price">$9/month</p>
        <button class="select-plan">Select</button>
    </div>
    <div class="plan-card" data-plan="pro">
        <h3>Pro</h3>
        <p class="price">$29/month</p>
        <button class="select-plan">Select</button>
    </div>
    <div class="plan-card" data-plan="enterprise">
        <h3>Enterprise</h3>
        <p class="price">$99/month</p>
        <button class="select-plan">Select</button>
    </div>
</div>
    

Your Tasks:

When a "Select" button is clicked, add "selected" class to its parent .plan-card
Remove "selected" class from all sibling cards
Fade out all sibling cards slightly (opacity: 0.6)
Keep the selected card at full opacity
Bonus: Add a "Popular" badge to the middle card only
Bonus: Show/hide a comparison section between the selected plan and its siblings

Hint: Use closest() to get the card, then siblings() to deselect others.

Key Takeaways

siblings() gets all siblings - perfect for "one active at a time" patterns
next() and prev() move one element forward/backward
nextAll() and prevAll() get all siblings in one direction
nextUntil() and prevUntil() select ranges of siblings
All methods accept optional selectors to filter results
Sibling traversal is essential for tabs, carousels, and sequential interfaces
Remember: siblings() excludes the element itself