Javascript-форум - Удаление класса только по щелчку на сам объект, но не когда кликаешь на следующий

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Удаление класса только по щелчку на сам объект, но не когда кликаешь на следующий (https://javascript.ru/forum/jquery/41712-udalenie-klassa-tolko-po-shhelchku-na-sam-obekt-no-ne-kogda-klikaesh-na-sleduyushhijj.html)

Удаление класса только по щелчку на сам объект, но не когда кликаешь на следующий

День добрый!

Разбираюсь с jquery. Буду рад, если подскажите.

Например, имеем два блока А и B.

Простой пример, имеется аккордеон (в нем два блока А и B), открывается блок (А) по нажатию.

При клике на другой (B), (B) открывается, а предыдущий (A) сворачивается.

Т.е. всегда открыт только один блок. А должно открываться неограниченное число.

Вот всю голову сломал, как не удалять класс открытому при клике на другой, а закрывать только при втором клике на открытый блок.

Буду признателен за помощь.

$(function() {
		$('.accordeon-content').not('.active').hide();

		$('.accordeon-caption').click(function() {
			$('.accordeon-content').not($(this).next('.accordeon-content')).removeClass('active').slideUp(600);
			$(this).next('.accordeon-content').addClass('active').slideDown(600);
		})
	})

Mrjoey,
а html где?

$(function() {
		$('.accordeon-content').not('.active').hide();
		$('.accordeon-caption').click(function() {
			$(this).next('.accordeon-content').toggleClass('active').slideToggle(600);
		})
	})

Спасибо за ответ. Пробовал Ваш код, не выходит что-то каменный цветок(

<dl class="accordeon">
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content active">
123
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
567
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
890
  </dd>
</dl>

Mrjoey,
и что не так ?

<!DOCTYPE HTML>

<html>

<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <script>
    $(function() {
		$('.accordeon-content').not(':first').hide();
                           $('.accordeon-content:first').addClass('active')
		$('.accordeon-caption').click(function() {
			$(this).next('.accordeon-content').toggleClass('active').slideToggle(600);
		})
	})

</script>
</head>

<body>

 <dl class="accordeon">
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
123
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
567
  </dd>
  <dt class="accordeon-caption">Заголовок</dt>
  <dd class="accordeon-content">
890
  </dd>
</dl>

</body>

</html>

спасибо преогромное! выручили!

А можно ещё спросить, что Вы бы лично посоветовали почитать, чтобы разбираться в jquery?

Можно ещё один вопрос?

Можно как то для первого блока, по умолчанию сразу назначать класс active?

<dt class="accordeon-caption">Заголовок</dt>
      <dd class="accordeon-content">
         123
      </dd>

чтобы было вот так:

<dl class="accordeon">
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content active">
	123
	  </dd>
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content">
	567
	  </dd>
	  <dt class="accordeon-caption">Заголовок</dt>
	  <dd class="accordeon-content">
	890
	  </dd>
	</dl>

Цитата:

Сообщение от Mrjoey

Можно как то для первого блока, по умолчанию сразу назначать класс active?

смотрите код выше 4 пост

Благодарю!) ларчик просто открывался.

А я полез в справочник, на который вы ссылку скинули, стали пробовать, получилось примерно так:
$('.show-layered dd.accordeon-content:first').css('display', 'block');

задумка хоть и верна по-моему, но там по умолчанию дописывается display: none;

Надо было не свойство, а класс присваивать, верно?