JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="foreach: Households " class="householdRow">
    <div class="actions item">
        <img class="toggle" src="~/Images/toggle.png" />
    </div>
    <div class="item" data-bind="text: HouseholdId"></div>
    <div class="item" data-bind="text: Name"></div>
    <div class="item">IACodes</div>
    <div class="item">Date</div>
    <div class="numberItem item">T12</div>
    <div class="numberItem item">AUA</div>
    <div class="item" data-bind="text: Segmentation.Name"></div>
    <div class="actions item"></div>
    <div class="accounts" data-bind="foreach: Accounts">
        <div class="accountRow">
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="text: xxx"></div>
            <div class="item" data-bind="dateFormat: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="numberItem item" data-bind="text: xxx"></div>
            <div class="item"></div>
            <div class="actions item">
                <img id="delete" src="~/Images/delete.png" />
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).on("click", ".toggle", function () {
    $(this).parent().siblings(".accounts").slideToggle(500);
});