アコーディオンメニューで開いた内容を維持したい

Question

アコーディオンメニューを作成したのですが、
一度クリックして開いた内容を維持して、次々と開きたいです。
いろいろ試したのですが・・・よろしくお願いいたします

<!--
$(function(){
	$(".a_item_r").click(function(){
		$(".a_item_r").removeClass("open_close_r");
		$(".a_contents_r p").css("display","none");
		$(this).next().slideUp(300);
		$(this).removeClass("selected");
		if($(this).next().css("display")=="none"){
			$(this).addClass("open_close_r");
			$(".a_contents_r").slideUp(300);
			$(this).next().slideDown(300);
			$("+.a_contents_r p",this).fadeIn(1500);
			$(".selected").removeClass("selected");
			$(this).addClass("selected");	
		}
	});
});
//-->

CSS

.a_item_r{
	text-align:left;
	padding:10px; cursor:pointer;
	position:relative;
	font-weight:bolder;
}
.a_contents_r{
	display:none;
	padding:10px;
	border:solid 1px #d6dddf;
}
.selected{
	background-color:#DCDCDC;
}
.a_contents_r p{
	display:none;
	margin:10px 0;
	border-bottom:dashed 1px #d6dddf;
}
.a_item_r:after{
	background:url(arrow_dw.png) no-repeat left top;
	content: "";
	display: block;
	width: 20px;
	height: 10px;
	position:
	absolute;
	right: 20px;
	background-size: 100% auto;
	top:15px;
	bottom:0;
	-webkit-transition: 0.3s linear;
	-moz-transition:0.3s linear;
	-ms-transition:0.3s linear;
	transition: 0.3s linear;
}
.open_close_r:after{
	-webkit-transform: rotateZ(180deg); 
	transform: rotateZ(180deg);
}

          <div class="a_item_r">Q.1</div>
          <div class="a_contents_r">
            <p>A.1</p>
          </div>
          <div class="a_item_r">Q.2</div>
          <div class="a_contents_r">
            <p>A.2</p>
          </div>
          <div class="a_item_r">Q.3</div>
          <div class="a_contents_r">
            <p>A.3</p>
          </div>

Answer 1

セレクタでclass指定で要素を選択すると他の要素に影響を与えてしまうので、thisを起点として処理を書けばできるとおもいます。以下のような感じでしょうか。

$(function(){
    $(".a_item_r").click(function(){
        if($(this).next().css("display")=="none"){
            $(this).addClass("open_close_r");
            $(this).next().slideUp(300);
            $(this).next().slideDown(300);
            $(this).next().children("p").fadeIn(1500);
            $(".selected").removeClass("selected");
            $(this).addClass("selected");    
        } else {
            $(this).removeClass("open_close_r");
            $(this).next().children("p").css("display","none");
            $(this).next().slideUp(300);
            $(this).removeClass("selected");        
        }
    });
});

JSFiddle

Answer 2

取得したjQueryオブジェクトを明確にして変数に格納すると、可読性が良くなると思います。
またclassをadd/removeする場合はtoggleClassメソッドが便利です（指定のclassが存在するときは削除、存在しないときは追加します）。
.toggleClass() | jQuery API Documentation

$('.a_item_r').on('click', function(e) {
  // e.currentTarget は クリックした div.a_item_r を指します
  var $item = $(e.currentTarget);
  var $contents = $item.next();
  // 対象のclassが存在すれば削除、存在しなければ追加
  $item.toggleClass('open_close_r').toggleClass('selected');
  if ($item.hasClass('open_close_r')) {
    $('p', $contents).fadeIn(1500);
    $contents.slideDown(300);
  } else {
    $contents.slideUp(300);
  }
});