CODEWITHSUNDEEP
javascriptjqueryhtml
Maaz
Maaz

Reputation: 4303

Using slideToggle with table rows (nesting a div) not working

After reading around it seems that a good solution to using slideToggle() on table rows is to nest a div inside. I've tried the following, but it doesn't seem to work at all.

jQuery

function toggle_dropdown(entry_id) {

    $(".library-dropdown-animation").slideUp("slow"); // Slide up any that are open
    $(".library-edit-dropdown").style.display = "none"; // Set their table row displays to none
    $("#library-dropdown-animation-" + entry_id ).slideDown("slow"); // slide the clicked one down 
    $("#library-edit-dropdown" + entry_id ).style.display = "block"; // set it's parent table row's display to block
}

HTML

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(123);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-123" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-123">

                                </div>    
                            </td>                                    
                        </tr>

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(124);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-124" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-124">

                                </div>    
                            </td>                                    
                        </tr>

                        <tr class="library-item-header">
                            <td class="library-item-title" onclick="toggle_dropdown(125);" style="cursor: pointer;">
                                <a href="<?php echo get_permalink($anime_id); ?>"><?php echo $anime_name; ?></a>
                            </td>
                        </tr>

                        <tr id="library-edit-dropdown-125" class="library-edit-dropdown" style="display: none;">
                            <td colspan="4">
                                <div class="library-dropdown-animation" id="library-edit-animation-125">

                                </div>    
                            </td>                                    
                        </tr>

So essentially, I've got a td in another row that when it's clicked it slides it's content row (right beneath it) down while sliding any other row up. Since we can't use slide on table row (hide() and show() and toggle() works perfectly fine by the way) i've used a containing div that has content, in this example i've left the content out. In any case, clicking on the td does nothing using this jQuery.

Here is a jsFiddle: http://jsfiddle.net/wxu3E/

Upvotes: 0

Views: 1411

Answers (2)

Emad Khalil
Emad Khalil

Reputation: 823

Please check this solution: http://jsfiddle.net/wxu3E/2/

i added the events on the Anchor itself not the row by adding a class to it, also I added attribute entry_id

<a href="#" entry_id="124" class="toggle_dropdown">Click</a>

and in the JQuery code the event will be attached to elements with class toggle_dropdown

$(".toggle_dropdown").click

Upvotes: 2

patel.milanb
patel.milanb

Reputation: 5992

Working Jsfiddle: http://jsfiddle.net/patelmilanb1/LzaZT/

Suggestion: data-attributes might come in handy here... i have added data-attribute in your HTML, please look at the HTML carefully in jsfiddle.

data-id="123"

so your final Jquery looks like this:

 $(document).on("click", ".library-item-title", function (e) {
        e.preventDefault();
        var entry_id = $(this).data("id");
        toggleDropdown(entry_id);
    });

    function toggleDropdown(entry_id) {
        $(".library-edit-dropdown").slideUp("slow");
        $("#library-edit-dropdown-" + entry_id).slideDown("slow");
    }

Error in your code: you are missing - at the end in this line, as your DIV id deos contain -

$("#library-edit-dropdown" + entry_id ).style.display = "block";

try this fiddle for animation: http://jsfiddle.net/patelmilanb1/LzaZT/1/

function toggleDropdown(entry_id) {
    $(".library-edit-dropdown").hide("slow");
    $("#library-edit-dropdown-" + entry_id).show("slow");
}

Upvotes: 1

Related Questions