Content hide/show design issue

Hi, I have simply hidden the content of homepage at first then showing upon click to button. But when the content is shown design gets messy by widening the divs. Please have look at website - iamicongroup.com

    if (! sessionStorage.firstVisit) {
    // hide the element
    $("#content").hide();

    // check this flag for escaping this if block next time
    sessionStorage.firstVisit = "1";
    }
    $(".roll-button").click(function(){
    $("#content").show();
    });

Hello there,

Try this code instead.

    jQuery(function($) {

      if (! sessionStorage.firstVisit) {
        // hide the element
        $("#content").css({
          'height': '0px',
          'opacity': '0'
        });

        // check this flag for escaping this if block next time
        sessionStorage.firstVisit = "1";
      }

      $(".roll-button").click(function(){
        $("#content").css({
          'height': 'auto',
          'opacity': '1'
        });
      });

    });

Regards,
Kharis

Hi Kharis, thanks for your prompt response. I have applied your code. unfortunately it creates a wide white space below at first. screenshot attached -

Just to share, the following code resolved the design glitch.

if (! sessionStorage.firstVisit) {
  $("#content").css({'transform':'scaleY(0)','height':0});
  sessionStorage.firstVisit = "1";
}

$(".roll-button").click(function(){
  $("#content").css({'transform':'scaleY(1)','height':'auto'});
});

Awesome! You did really a good job. Thank you for sharing. We highly appreciate it!

Regards,
Kharis