jQuery多幻灯片切换

我的问题是有多个

事件

同时切换多个

事件详细信息

。我考虑过每个人都有不同的身份证。然而，我不知道如何仍然能够通过HTML表单创建更多的事件，而不是让每个事件切换每个事件细节

页面的相关HTML：

$(document).ready(function(){
    $('#event1').click(function(){
        $('.eventdetails').slideToggle('fast');
    });
});

霍克斯伯里1号

运输 住宿 食物 竞争

---

尝试使用类而不是id进行查询：

<p class="event" id="event1">Hawksbury 1</p>
<div class="eventdetails" >
    <form name="event" method="post" action="">
        <table>
            <tr>
                <td><div>Transport</div></td>
                <td><input type="checkbox" name="transport" id="transport"> </input></td>
                <td><div>Accomodation</div></td>
                <td><input type="checkbox" name="accomodation" id="accomodation"></input></td>
            </tr>
            <tr>
                <td><div>Food</div></td>
                <td><input type="checkbox" name="food" id="food"> </input></td>
                <td><div>Competing</div></td>
                <td><input type="checkbox" name="competing"     id="competing"></input></td>
            </tr>
            <tr>    
            <td><input type="submit"></input></td>
            </tr>
        </table>
    </form>
</div>

演示：

---

如果您还不熟悉jquery：$（this）.next（）返回您正在单击的元素的以下同级。查看更多信息。

请添加相关的HTML，以便我们可以查看哪些元素具有单击功能，哪些元素具有切换功能。也许这很容易解决。我只是添加了html

$(document).ready(function(){
    $('.event').click(function(){
        $(this).next('.eventdetails').slideToggle('fast');
    });
});