Javascript-форум - Поменять направление открытия спойлера

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Поменять направление открытия спойлера (https://javascript.ru/forum/dom-window/72359-pomenyat-napravlenie-otkrytiya-spojjlera.html)

Поменять направление открытия спойлера

Самих вариантов реализации спойлера на сайте много, но все они при клике на "Читать подробнее..." открывают скрытый контент плавно вниз.

Как поменять направление вверх или вниз принудительно?
В чём сама проблема? На мобильных версиях сайта, ряд блоков выстраиваю в колону вертикально вместо "в ряд" как на ПК. Но при этом применяю еще css-свойство flex-direction: column-reverse;, чтобы поменять порядок расположения блоков. Т.е. не 123, а 321 расположить их на мобильных.

Но почему-то при клике на "Читать подробнее" браузер или JScript берут и вверх спойлер разворачивает, не вниз. Это из-за flex-direction: column-reverse;
Есть ли возможность в JScript менять принудительно направление открытия скрытого текста? Всегда вниз, при клике назначить...

AndreySW,
сделайте минимальный макет

Не понял... Минимальный макет чего: у себя там шаблон сайта для мобильных менять?

AndreySW,
Нет, в этом форуме сделайте пример с минимально возможным кодом, для того чтобы показать нам суть проблемы!

Я извиняюсь, там ранее не понял что это просили дооформить пост.
Здесь как-то на форуме в комменты можно прикреплять, но воздержался. Так как застряну видать надолго.

Вот реализация на КодэПене - https://codepen.io/anon/pen/xpNWWa
Там когда узкое внизу окно просмотра готового результата, то как раз тот самый эффект нежелательный срабатывает.
Где секция "Второй блок". если нажать на Подробнее... то спойлер вверх открывает материал скрытый, не вниз.

Аналогично и на рабочем сайте, когда на мобильных - все эти Подробнее открываются вверх. некоторые вниз, когда как - в зависимости от расположения объекта на экране.

AndreySW,
убрал лишнее ... если смотреть не в фрейме, глюков не обнаружил.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .wrap{
    display:flex;
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    align-items:flex-end;
    align-content:center;
    width:100%;
    margin:auto;
  }

  .block{
    width:60%;
    display:block;
  }

  .block h3{
    color:red;
  }

  .showmore{
    cursor:pointer;
    color:blue;
    font-style:italic;
    opacity:1;
  }

  .read-hide{
    display:none;
    width:65%;
  }

  .showmore.read{
    opacity:0.5;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.showmore').click(function() {
  $(this).toggleClass('read')
  .next().slideToggle(600);
});
});
  </script>
</head>

<body>
<div class="wrap">
  <div class="block"><h2>Первый блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
  <div class="showmore">Подробнее...</div>
    <div class="read-hide">
    <h3>Скрытый текст</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  </div>
  <div class="block"><h2>Второй блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
  <div class="showmore">Подробнее...</div>
    <div class="read-hide">
    <h3>Скрытый текст</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  </div>
   <div class="block"><h2>Третий блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
  <div class="showmore">Подробнее...</div>
    <div class="read-hide">
    <h3>Скрытый текст</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  </div>

</div>
</body>
</html>

Хмм.. Даже здесь на сайте, таже проблема если пробовать предложенный мною код в теме.
Подвиньте чуток вверх первую блок-секцию, и на жмите на "Подробнее". Спойлер вверх полезет, не вниз открывает. - http://prntscr.com/i502md

Там по сложности макета, нужно перевернуть блоки на сайте для мобильной версии. Если на ПК, то всё как надо работает спойлер. А вот, назначив блокам свойства "реверс порядка расположения", за одно и направление открытия спойлера меняется. Этакий... через чур могучий CSS-flexbox оказался, что-ли.

upd: т.е. если убрать "переворачивание блоков" - flex-direction:column-reverse;, поменять на flex-direction:column;
то спойлеры как надо работают: вниз открываются во всех случаях!

Доброго времени тем, кто еще не читали эту тему.
Сформулирую немного иначе вопрос:

"Где в библиотеке jQuery v2.2.0 - https://ajax.googleapis.com/ajax/lib.../jquery.min.js , находится код анимации спойлера?"
Нужно поменять в коде сайта, или там в библиотеке направление открытия спойлера - вместо вниз, назначить вверх.

Тогда при перевороте блоков со скрытым текстом свойствами CSS (см. выше пример здесь же на форуме код от "Рони" где нажать на "Посмотреть!") содержимое будет открываться вниз, а не вверх как сейчас.

рони,
Да-да, я также пришёл к выводу что в моём случаи/потребности это некий "особый случай". Тут стандартную библиотеку нет смысла править.
Или же использовать jQuery UI, подключив от него эффекты нужные, или вообще на чистом JS+СSS написать свою анимацию спойлера, минуя предложения от стандартных библиотек jQuery.

Добавлю разве что следующее, что реверс или смена порядка расположения блоков с помощью CSS, а это применяя FlexBox или CSS-Grid... Там оно переворачивает и логику анимации, идущей от jQuery. Не в каждом случаи, но как видим - бывает.