Type Accordion on jQuery

Question

There is a table with data:

<table class="forums"> <tr class="forumtitle"><td><p class="forumstar"></p></td><td><a href="#"><h3>Обзор гаджетов 2011. Выпуск 5.</h3></a></td></tr> <tr class="forumcontent"><td><p class="forumcomment"></p></td><td><span>Приветствую вас на пятом выпуске обзора гаджетов для ваших машинок. Сегодня в номере: 1. Очередная фигнюшка для подсветки клавиатуры 2. USB-пылесос, для чистки клавиатуры и рабочего стола. 3. Записная книжка. Все эти штуки работают от USB поэтому их называют гаджетами, удобными и приминимыми в любых условиях и любом месте.</span></td></tr> <tr class="forumtitle"><td><p class="forumstar"></p></td><td><a href="#"><h3>Обзор гаджетов 2011. Выпуск 4.</h3></a></td></tr> <tr class="forumcontent"><td><p class="forumcomment"></p></td><td><span>Приветствую вас на четвёртом выпуске обзора гаджетов для ваших машинок. Сегодня в номере: 1. Мини-колонки попрыгунчики. 2. Очередная подборка хабов. 3. Будильник и таймер. Все эти штуки работают от USB поэтому их называют гаджетами, удобными и приминимыми в любых условиях и любом месте.</span></td></tr> <tr class="forumtitle"><td><p class="forumstar"></p></td><td><a href="#"><h3>Обзор гаджетов 2011. Выпуск 3.</h3></a></td></tr> <tr class="forumcontent"><td><p class="forumcomment"></p></td><td><span>Приветствую вас на третьем выпуске обзора гаджетов для ваших машинок. Сегодня в номере: 1. Блокиратор USB и компьютера. 2. USB 3.0 интерфейс. 3. Зарядка для всех телефонов. Все эти штуки работают от USB поэтому их называют гаджетами, удобными и приминимыми в любых условиях и любом месте.</span></td></tr> <tr class="forumtitle"><td><p class="forumstar"></p></td><td><a href="#"><h3>Обзор гаджетов 2011. Выпуск 2.</h3></a></td></tr> <tr class="forumcontent"><td><p class="forumcomment"></p></td><td><span>Приветствую вас на втором выпуске обзора гаджетов для ваших машинок. Сегодня в номере: 1. Холодильник от USB. 2. USB-весы со специальном программой. 3. Тамагочи. Все эти штуки работают от USB поэтому их называют гаджетами, удобными и приминимыми в любых условиях и любом месте.</span></td></tr> <tr class="forumtitle"><td><p class="forumstar"></p></td><td><a href="#"><h3>Обзор гаджетов 2011. Выпуск 1.</h3></a></td></tr> <tr class="forumcontent"><td><p class="forumcomment"></p></td><td><span>Приветствую вас на первом выпуске обзора гаджетов для ваших машинок. Сегодня в номере: 1. Подогреваем чай не отходя от компьютерного стола. 2. USB-зажигалка. 3. Подушка с подогревом, на случай если решишь заснуть на компьютерном столе. Все эти штуки работают от USB поэтому их называют гаджетами, удобными и приминимыми в любых условиях и любом месте.</span></td></tr> </table>

It is necessary to do so that forumcontent is immediately hidden, and after clicking (pointing) on the forumtitle, it will open.

At the moment, the code listing is:

 $(document).ready(function() { $(".forumcontent").slideUp(); $(".forums").delegate(".forumtitle","click", function() { $(".forumtitle").next().slideDown(); }); //$(".forumtitle").hover(function() { // $(".forumcontent").slideDown(); //},function() { // $(".forumcontent").slideUp(); //}); });

But I think you immediately realized that this method opens all the blocks of forumcontent, and you need only the one on whose neighbor the event occurred. I was looking for such things in the network, I did not find anything worthy, at least I would like to understand the algorithm for solving this problem.

Alex Silaev Alex Silaev 3,317 12 24 · Accepted Answer · 2011-03-29T14:11:23

Try this: (code written on the knee, you need to protest)

 $(document).ready(function() { $(".forumcontent").slideUp(); $(".forums .forumtitle").click(function() { var nx = $(this).next(".forumcontent"); $(".forumcontent").not(nx).slideUp(); $(nx).slideDown(); }); });

That is necessary!) Only for some reason, a smooth sliding does not occur.
Even if you set the value to normal, slow, fast, but oh well, then hide () and show effectively work with these values.

Answer 2 · 2011-03-29T12:07:27

use .filter ()

 $(document).ready(function() { $(".forumcontent").slideUp(); $(".forums").delegate(".forumtitle","click", function() { $(".forumcontent").slideUp(); $(this).next().filter(":first").slideDown(); }); });

rnd_d

2.165 13 24

This is certainly not what I wanted, but I found out about this function. Tried to do filter (this) but that doesn't work. - chuikoff
slightly described, as a result, using the filter can be simplified and shortened (I corrected above) Read about filter ( api.jquery.com/filter ), an extremely useful thing that would not fence all kinds of .not and so on - rnd_d
The solution will not work correctly, because $ (". forumcontent"). slideUp (); minimizes everything, and $ (this) .next (). filter (": first"). slideDown (); will expand the desired item without fitler, i.e. there is no need for it, but it will be buggy, because the item is already collapsing at the moment. - Alex Silaev

|

Type Accordion on jQuery

2 answers 2

More articles: