jQuery target next hidden div that's on a different level

DESIRED RESULT
I have a table full of data. In a <td> of each row is a modal trigger. I want that modal trigger to pop open a hidden modal that resides outside of the <td>, but still within the table (after its closing </tr>). Clicking each trigger only opens its hidden <div>.

PROBLEM
I can't seem to target the hidden <div> which is up a level and a sibling to the <tr>. I've tried so many variations of .next, .parent, .closest, and .find - but to no avail. I can get it to open if the hidden <div> is directly after the </td> with the below jQuery, but I don't want the hidden <div> there...I want it after the </tr> like below. Could someone please enlighten me?

CODEPEN
codepen (updated to reflect chosen answer from guest271314)

HTML

<div class="container">
    <table>
        <!-- ROW 1 -->
        <tr>
            <td>
                <div class="quickViewTrigger">MODAL TRIGGER 1</div>
            </td>
            <td>misc cell 1</td>
            <td>misc cell 2</td>
        </tr>
        <div class="quickViewContainer">
            <div id="quickViewCloseButton" class="close" style="margin-right:10px;"><span></span></div>
                <div class="quickViewTitle">MODAL 1</div>
                <div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit amet
volutpat sem.</div>
        </div>
        <!-- ROW 2 -->
        <tr>
            <td>
                <div class="quickViewTrigger">MODAL TRIGGER 2</div>
            </td>
            <td>misc cell 1</td>
            <td>misc cell 2</td>
        </tr>
        <div class="quickViewContainer">
            <div id="quickViewCloseButton" class="close" style="margin-right:10px;"><span></span></div>
            <div class="quickViewTitle">MODAL 2</div>
            <div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit amet
volutpat sem.</div>
        </div>
    </table>
</div>

JQUERY

$(document).ready(function () {
    "use strict";

    // OPEN MODAL ON TRIGGER CLICK
    $(".quickViewTrigger").on('click', function () {
        var $quickview = $(this).next(".quickViewContainer");
        $quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
        $(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
    });

    // CLOSE MODAL WITH MODAL CLOSE BUTTON
    $(".close").click(function() {
        $(".quickViewContainer").fadeOut();
    });

});

Answers 1

  • Try something like this. codepen

    HTML:

    <div class="container">
    <table>
        <tr>
            <td>
                <div class="quickViewTrigger" data-modal="1">MODAL TRIGGER 1</div>
            </td>
            <td>misc cell 1</td>
            <td>misc cell 2</td>
        </tr>
        <tr>
            <td>
                <div class="quickViewTrigger" data-modal="2">MODAL TRIGGER 2</div>
            </td>
            <td>misc cell 1</td>
            <td>misc cell 2</td>
        </tr>
    
    </table>
    <div class="modals">
        <div class="quickViewContainer" id="modal1">
            <div class="close" style="margin-right:10px;"><span></span></div>
            <div class="quickViewTitle">MODAL 1</div>
            <div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit
                amet volutpat sem.</div>
        </div>
        <div class="quickViewContainer" id="modal2">
            <div class="close" style="margin-right:10px;"><span></span></div>
            <div class="quickViewTitle">MODAL 2</div>
            <div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit
                amet volutpat sem.</div>
        </div>
    </div>
    

    js:

        $(document).ready(function() {
        "use strict";
        // OPEN MODAL ON TRIGGER CLICK
        $(".quickViewTrigger").on('click', function(e) {
            e.preventDefault();
            var $quickview = $("#modal" + $(this).data('modal'));
            $quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
            $(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
        });
        // CLOSE MODAL WITH MODAL CLOSE BUTTON
        $(".close").click(function() {
            $(".quickViewContainer").fadeOut();
        });
    });
    

    css:

    .modals .quickViewContainer{
        display:none;
    }
    .close{
        position:absolute;
        right:3px;
        top:3px;
        width:10px;
        height:10px;
        border: 1px solid #ccc;
    }
    

    Div is not valid child of table, so move it to another div.


Related Articles