Почему скрытый элемент при активном методе toggle отображается, как inline?

Question

[ligisayan]

Есть галерея, которую хочу открывать при нажатии на стрелку и закрывать при нажатии на другую. Не могу понять, почему, когда когда к скрытой стрелке применяется метод toggle оно отображает элемент, как inline, а не block, хотя он изначально предопределен как блочный и как это можно исправить? фидл

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="arrow-slide1" class="arrow-slide"></span><span id="gallary-hide1" class="gallary-hide">[Best_Wordpress_Gallery id="2" gal_title="party"]</span><span id="arrow-slide1-up" class="arrow-slide arrow-slide-up"></span>

$('#arrow-slide1').click(function() {
	  $('#gallary-hide1').toggle(200);
	  $('#arrow-slide1').toggle();
	  $('#arrow-slide1-up').toggle();
	});

.gallary-hide {
  display: none;
}
.arrow-slide {
  background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png") no-repeat;
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.arrow-slide-up {
  background: #fff url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat;
  display: none;
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

Answer 1

[iBird Rose]

потому что это спан. для toggle без разницы что ты переопределяешь display. меня все span свои на div