アコーディオンを開いたときにタイトル部分の下に隙間が生じてしまう

Question

Jquery でアコーディオンを作成したのですが、
開いたときにピンクのバーの下に隙間が出来て、そこにコンテンツの文字が入り込んでしまいます。本来であればそこはタイトル部分なのですが、
そこを無視されてしまいます。
どのように対処すればよいかワカリマセン。
宜しくお願いいたします

$(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");        
        }
    });
});

.a_item_r{
  text-align:left;
  padding:10px; cursor:pointer;
  position:relative;
  font-weight:bolder;
  margin-top:20px;
  background-color:#FDEFF5;
  clear:both;
}
.a_contents_r{
  display:none;
  padding:10px;
  border:solid 1px #d6dddf;
}
.selected{
  text-align:left;
  padding:10px;
  cursor:pointer;
  position:relative;
  background-color:#FADCE9;
}
.a_contents_r p{
  display:none;
  margin:10px 0;
  border-bottom:dashed 1px #d6dddf;
  text-align:left;
}
.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);
}

HTML

//閉じているとき
          <div class="a_item_r">
            2017年03月22日&nbsp;test
          </div>
          <div class="a_contents_r" style="display: block;">
            <div class="pull-left">
              <img class="img-responsive" src="/image_media/20170301093617OvAv50.jpg">
            </div>
            <div class="pull-left" style="padding-left:20px;">test</div>
          </div>

//開いたとき
          <div class="a_item_r open_close_r selected">
            2017年03月22日&nbsp;test
          </div>
          <div class="a_contents_r" style="display: block;">
            <div class="pull-left">
              <img class="img-responsive" src="/image_media/20170301093617OvAv50.jpg">
            </div>
            <div class="pull-left" style="padding-left:20px;">test</div>
          </div>

Comments

[kei344]

https://jsfiddle.net/t0py7r21/ 「ピンクのバーの下」とはどこのことでしょうか、具体的に記述いただけませんか？

[hidepon]

<div class="a_item_r"> 2017年03月22日&nbsp;test </div>の部分がタイトル部分でこの部分をクリックするとアコーディオン状態でコンテンツ部分が開きます。その時にタイトル部分のピンクの部分の下部に隙間（padding?）が出来、さらにその部分にコンテンツ部分が重なって表示されます。その隙間（padding?）をなんとかしたいですがうまくいきません

[yambejp]

特に気になるような現状は見受けられないので、ご確認なさっているOSやブラウザなど詳細を提示されたほうがよいかもしれません

[hidepon]

bootstrap3の影響なんでしょうか？すべてのブラウザに共通して影響が見られます。

Answer 1

さらにその部分にコンテンツ部分が重なって表示されます。

この部分は再現できませんでしたが、「隙間」は下記部分の padding を削除すれば消えます。

.a_contents_r{
  display:none;
  /*padding:10px;*/
  border:solid 1px #d6dddf;
}
```**動くサンプル：**[https://jsfiddle.net/t0py7r21/1/](https://jsfiddle.net/t0py7r21/1/)