Jquery table accordion multiple expand

Question

i need help with some redesign of my jquery code if someone can help me. I want to expand multiple categories without sliding out the other ones. Here is my actual code for sliding one table.

Thnx in advance.

html

<table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

            <table class="research">
                <tbody>
                    <tr class="accordion">
                        <td colspan="3">This is the header</td>
                    </tr>
                    <tr>
                        <td>Research</td>
                        <td>Description</td>
                        <td>Partner</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
                    </tr>
                </tbody>
            </table>

jquery

$(function() {
    var $research = $('.research');
    $research.find("tr").not('.accordion').hide();
    $research.find("tr").eq(0).show();

    $research.find(".accordion").click(function(){
        $research.find('.accordion').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);
    }).eq(0).trigger('click');
});

http://jsfiddle.net/URh2W/

Answer 1

I would avoid using any tables at all, especially if you're going to be animating elements. I would highly recommend using Divs instead!

Also, avoid at all costs using inline styles, and ESPECIALLY avoid inline width declarations.

Here's the JSFiddle:

http://jsfiddle.net/Ec3hJ/

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="research" width="100%">
    <div class="accordion">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div><a href="" title="Edit">Editati</a> | <a class="a_del" href="" title="Delete">Stergeti</a></div>
    </div>

Let me know if that helps move you in the right direction. If you are absolutely dead-set to use Tables, it may or may not even work, but you could try converting those Divs back into a table... you shouldn't have to change the CSS or JS.