Как изменить скрипт для правильного взаимодействия блоков записей?

Question

[Александр Беляков]

Есть блоки записей с классом article, которые содержат в себе кнопки "Просмотреть полностью" c классом readmore и id типа readmore-номер и заранее скрытый блок контента с id типа article-номер.
Пример структуры двух записей представлен ниже

<div class="article">
   <div class="article-content" id="article-12">
 
   <div>
   <p class="readmore" id="readmore-12"><a href="#">Читать полностью</a></p>
</div>

<div class="article">
   <div class="article-content" id="article-10">
 
   <div>
   <p class="readmore" id="readmore-10"><a href="#">Читать полностью</a></p>
</div>

Также есть скрипт который раскрывает и скрывает записи. Причём, если одна запись открыта и происходит нажатие на другую, то последняя открывается, а первая скрывается, это происходит синхронно. Но у этого скрипта есть баг: если открыть и закрыть одну и ту же запись, а потом открыть другую запись, то откроются обе - текущая и предыдущая. Вопрос: что добавить в скрипт, чтобы исправить этот баг? Скрипт с комментариями представлен ниже:

var btn = $('.readmore'); // создаём объект кнопки
var id_prev, id; // объявляем переменные
btn.click(function(e) { // при клике на кнопку
	e.preventDefault(); //прерываем действие по умолчанию
	if(id) {id_prev = id;}; // сохраняем айди предыдующей записи при непустой текущей                                  
	id = $(this).attr('id').replace(/\D/g, ''); // вытаскиваем номер текущей записи из айди и сохраняем её в переменную            

	$('#article-'+id).toggle(500); // переключатель для текущей записи
	
	if(id_prev!=id) {      // если айли предыдущей записи не совпадает с айди текущей записи, то активируем переключатель для предыдущей записи                                 
		$('#article-'+id_prev).toggle(500);	 // переключатель для предыдущей записи		   	
	}
});

Answer 1

[Александр Беляков]

Отказался от использования id. Решил проблему через родительский элемент.

$(document).on('click','.readmore',function(){
	var parent = $(this).parent();
	var isOpen = parent.find('.article-content').hasClass('opened');
	$('.article-content.opened').slideUp().removeClass('opened');
	if (!isOpen) {
		parent.find('.article-content').addClass('opened').slideDown();
	}
	return false;
})