Почему выводит в столбец?

Question

[kentos]

Блок выводит в строку, заметил, что при выведении, присваивается инлайн стиль display:block
Вот страница

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.btn-more').click(function() {
event.preventDefault();
    $('#salad-column').slideToggle('slow');
  });
});
$(function() {
  if ($('#salad-column').is(':hidden')) {
    $('.btn-more').html('Посмотреть больше');
  }
});
</script>

Answer 1

[Destell]

Потому что .slideToggle использует свойство display: block, которое перезаписывает ваше flex.

Пробуйте так:

$('#salad-column').slideToggle('slow').css({display: ""});

либо

$('#salad-column').slideToggle('slow').css({display: "flex"});

Comments

[kentos]

Спасибо!

Answer 2

[sdgroup14]

потому что вопрос не js а в css (это ваш код для родителя итемов... Рукола... шпинат...)

.g-cols>div {
    display: flex;
    flex-direction: column;
}

Comments

[kentos]

Не получается (