Hide/unhide element onclick

Question

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

Well I am trying to hide/show the class "minus7" by moving it down onclick and moving it back up onclick, but I want to keep the class "infox" intact and located at the same place it is. As you can see at the fiddle, it almost works, but there is leftover background and the grey X toggle button is smaller when collapsed... — user7176800, Feb 22 '17 at 14:02
Why not use [sideToggle](http://api.jquery.com/slidetoggle/) then you just have to call it without having to check for the state. — GillesC, Feb 23 '17 at 15:20
Ok, thanks, I can use the slideToggle, but it will not solve my problem... — user7176800, Feb 23 '17 at 15:33

isherwood · Accepted Answer · 2017-02-23T19:49:02.357

0

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

edited Feb 23 '17 at 19:49

answered Feb 23 '17 at 19:17

isherwood

58,414
16
114
157

Thanks for reply, I made the working example here: [https://jsfiddle.net/67L4yg3y/] but I am not able to make it work. It did not worked in my html page, I am not able to make it work even in this fiddle: [https://jsfiddle.net/a0ure6st/39/] – user7176800 Feb 23 '17 at 19:34
The Demo 5 looks pretty good to me. I will give it a try, Thanks! :) – user7176800 Feb 23 '17 at 19:44
Dont know why, but in my real code, the black box under the text disapears instantly onclick, but when i click again, it shows slowly as it should... Somethind is canceling the slow fade effect, dont sure whot and why... – user7176800 Feb 23 '17 at 20:09
Also, is there a way to make ".infoBlock" padding-top: 0px;? It brakes the ".infox" position after clicking on it... – user7176800 Feb 23 '17 at 20:22
Disabling CSS3 resolved the problem with instant displaying. But could you help me please with the padding-top thing? – user7176800 Feb 23 '17 at 20:49
Sorry I forgot one word, it should be CSS3 transitions, I disabled CSS3 transitions, which caused the error... – user7176800 Feb 23 '17 at 21:29
I don't understand your request about the padding. `.infox` doesn't move for me. I think you need to resolve your conflicting CSS issues. – isherwood Feb 23 '17 at 21:40
Adjust min-height to 34px. – isherwood Feb 23 '17 at 22:02
Oh did not see that. Thank you very much :) – user7176800 Feb 23 '17 at 22:08

Hide/unhide element onclick

1 Answers1