Hide/unhide element onclick

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

Edit: I managed to hide it properly by click. But it hides instantly. Is there an option to make it slide from the bottom of the screen?

THIS IS THE almost good FIDDLE

The old question below:

I am trying to hide an element when clicking on another element with the slidedown effect, but I have issues with it. As you can see on the fiddle, it almost works, but there is a leftover background, and the grey X toggle button is smaller when the info slides down. How can I fix it?

Here is the fiddle (Click the grey field with "X" on it)

<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();
});

Solution

Forcing a width on the container resolves the collapse issue, but I'm not sure it entirely behaves the way you'd like.

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

Demo

Moving the whitespace from the container to the inner element helps, but it still needs refinement.

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

Demo 2

I believe the reason it moves during slideToggle is because the left value is taken from the center of the height of the element. As it gets shorter, that position moves. Setting the transform origin to the bottom left resolves this.

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

Demo 3

Now we can apply text alignment to the button and some min-heights and we're closer:

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

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

Demo 4

We could then toggle a class to control background visibility on the outer element:

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

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

Demo 5

The little slide twitch can be resolved by removing the margin from the paragraph element and applying it to the heading instead.

Demo 6