Скрыть/показать элемент onlick

Question

THIS IS WHAT I AM TRYING TO MAKE IN THE FIDDLE BELOW

Edit: мне удалось скрыть это правильно щелчком. Но он прячется мгновенно. Есть ли способ сделать это слайдом со дна экрана?

THIS IS THE almost good FIDDLE

старый вопрос ниже:

Я пытаюсь скрыть элемент при щелчке на другом элементе с эффектом slidedown, но у меня есть проблемы с ним. Как вы можете видеть на скрипке, он почти работает, но есть оставшийся фон, а кнопка переключения серого X меньше, когда информация скользит вниз. Как я могу это исправить?

Here is the fiddle (Нажмите на серую область с «X» на нем)

<div id="full-width-slider" class="royalSlider heroSlider rsMinW rsDefault"> 
    <div class="rsContent"> 
    <img class="rsImg" src="https://www.w3schools.com/w3images/fjords.jpg" alt=""> 
    <div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="100" data-move-effect="top" data-speed="200"> 
     <a href="#" class="infox">X</a> 
     <div class="minus7"> 
     <h4>Nice picture</h4> 
     <p>This is the info about it. It´s nice, short and easy to read.</p> 
     </div> 
    </div> 
    </div> 


$(document).on("click", ".infox", function() { 
    $(".minus7").slideToggle(); 
}); 

Answer 1

Форсаж ширину на контейнере решает проблему коллапса, но я не уверен, что полностью ведет себя так, как вы хотите как.

.infoBlock { 
    ... 
    width: 220px; 
} 

Demo

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

.minus7 { 
    ... 
    margin-top: 50px; 
    margin-bottom: 100px; 
} 

Demo 2

Я считаю, что причина она движется во время slideToggle происходит потому, что значение left берется из центра высоты элемента. По мере того как он становится короче, эта позиция движется. Установка начала преобразования в левое нижнее положение разрешает это.

.infoBlock { 
    ... 
    transform: rotate(10deg) !important; 
} 

Demo 3

Теперь мы можем применить выравнивание текста к кнопке и несколько мин-высоту и мы ближе:

.infoBlock { 
    ... 
    min-height: 14px; 
} 

.infoBlock a { 
    ... 
    text-align: center; 
    padding-top: 4px; 
    display: inline-block; 
    min-height: 90px; 
} 

Demo 4

Мы могли бы затем переключить класс для контроля фоновой видимости o п внешний элемент:

$('.infoBlock').toggleClass('in out'); 

.infoBlock { 
    ... 
    transition: background .75s; 
} 
.infoBlock.out { 
    background: transparent; 
} 

Demo 5

Маленький слайд подергивание может быть решен путем удаления маржи от элемента параграфа и применяя его к товарной позиции вместо этого.

Demo 6