Как решить проблему с slideToggle()?

Question

[fantazerno]

Обычный slideToggle() на скрытый элемент у которого есть спозиционированный блок-уголок.

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

Пример кода:
https://codepen.io/fantazer/pen/mwzeWe

Answer 1

[Ridz]

<style>
.block {
  margin: 50px;
  height: 100px;
  width: 100px;
  background: #008000;
  position: relative;
  display: none;
}
.block::after  {
 content: '';
    position: absolute;
    left: 30px; top: -40px;
    border: 20px solid transparent;
    border-bottom: 20px solid green;
}
.toggle {
  padding: 20px;
  border: 1px solid #808080;
  display: inline-block;
  margin-left: 50px;
}
</style>
<div class="toggle">click me!</div>
<div class="block"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>$('.toggle').click(function(){
  $('.block').slideToggle().css("overflow","visible");
})
</script>

Answer 2

[Sergiu Mitu]

Сделать "уголок" через <span>, <i> или что-то ещё, главное не через :before :after

Comments

[Kovalsky]

В примере нету псевдоэлементов

[Sergiu Mitu]

немного ошибся.. вот , вообще смысл в том чтобы уголок небыл вне блока который появляется, так как slidetoggle на время анимации задает overflow hidden для этого блока