How to make minimized element or hidden on site?

Question

What is the name so that I can search as it does, of those items in html that appear minimized in the page. for example:

on an html site on your home on the right side near the window bar has a cropped image that when you click on it it slides to the left and shows it complete.

In case it’s not clear, I’ll look for a website with this and post the image. Thank you

Answer 1

You can use css and jquery, I’ll give an example here, in this example when clicking on the div it appears on the screen.

First you "hide" it using css:

.janela{
  width: 100px;
  height: 100px;
  border:1px solid #f00;
  margin-top: -90px;
  position:fixed;
}

And then you show using jquery:

$(function(){
  $( ".janela" ).click(function() {
    $(this).animate({
      marginTop: 0
    }, 1500 );
  });
});

Upshot: https://jsfiddle.net/9stsct8r/

Update:

This way the screen appears when clicking and hides while clicking again, it checks the margin-top and performs the action:

$(function(){
alert($(".janela").css('margin-top'));
  $(".janela").click(function() {
    var pos = parseInt($(this).css('margin-top').replace("px", ""));
        if(pos == 0){
        $(this).animate({
        marginTop: -90
      }, 1500 );
    }else{
      $(this).animate({
        marginTop: 0
      }, 1500 );
    }
  });
});

Upshot: https://jsfiddle.net/9stsct8r/1/