Question

First, I need to say I’m a beginner in jQuery and I need this for for my HTML/JS class. So here is what I need to do

    <div class="event">
    <div class="event-bar">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td class="space" colspan="7">
            </tr>
            <tr>
                <td class="event-date"><p>22 IV</p></td>
                <td class="event-place">19.30<br/>Kościół Księży Misjonarzy</td>
                <td class="event-doc">carte blanche</td>
                <td class="event-title">johann sebastian bach<br/>Pasja wg św. Mateusza</td>
                <td class="event-performers">Anna Schoek<br/>Stefan Telefan<br/>Lorem Ipsum</td>
                <td class="event-leader">dyrygent</td>
                <td class="event-toggler"><div class="toggler"></div></td>
            </tr>
            <tr>
                <td class="space" colspan="7">
            </tr>
        </table>
    </div>
    <div class="event-description">
        <p>...</p>
    </div>
</div>

The thing I need to achieve is div. toggler which when pressed should toggle div. event-description, there are X div.event. Every time you click div. toggler should only toggle current div event-description and hide other if other is open (one toggle at a time).

I cannot really do a fight with .parent() to get outside table.

Answer 1

Create a new css class – hidden:
then in css:

.hidden {display:none;}

jquery:

 $(document).ready(function () {
        $('.toggler').click(function () {
            $('.event-description').addClass('hidden');
            $(this).parents('.event:first').find('.event-description').removeClass('hidden');
        });
    });

should do it.