CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
Nikhil
Nikhil

Reputation: 119

Hiding Panel - by default is open when the page loads

The issue is when the page loads, by default the panel at the bottom of the page is open. I need to set when the page loads the panel should be closed and the functioning will remain same as in current, that when we click the panel opens and again clicked the panel will be closed or vice-versa.

(function($) {

  jQuery(document).ready(function() {

    Panel.init();

    $(document).on('click', '.tab-controller', function() {
      Panel.togglePanel();
    });

  });

  var Panel = {

    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',

    init: function() {

    },

    hidePanel: function() {
      $('.panel-wrapper').animate({
        bottom: -(Panel.getAnimationOffset())
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = false;
        Panel.updateTabMessage();
      });
    },

    showPanel: function() {
      $('.panel-wrapper').animate({
        bottom: 0
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = true;
        Panel.updateTabMessage();
      });
    },

    togglePanel: function() {
      ((this.isVisible) ? this.hidePanel : this.showPanel)();
    },

    updateTabMessage: function() {
      if (this.isVisible) {
        $('.tab-controller .close').show();
        $('.tab-controller .show').hide();
      } else {
        $('.tab-controller .close').hide();
        $('.tab-controller .show').show();
      }
    },

    getAnimationOffset: function() {
      return $('.panel-content').height();
    }

  }
})(jQuery);
.panel-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}
.panel-controller {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tab-controller {
  float: right;
  margin-right: 50px;
  padding: 10px 10px 5px;
  background-color: #8C293B;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
}
.tab-controller * {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.tab-controller .show {
  display: none;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  background-color: #8C293B;
}
.panel-content .content {
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-wrapper">
  <div class="panel-controller">
    <div class="tab-controller">
      <span class="close">CLOSE PANEL</span>
      <span class="show">OPEN PANEL</span>
    </div>
    <!-- tab-controller -->
  </div>
  <!-- panel-controller -->
  <div class="panel-content">
    <div class="content clearfix">
      <div>This
        <br/>Space
        <br/>is
        <br/>inside
        <br/>panel.</div>
    </div>
    <!-- content -->
  </div>
  <!-- panel-content -->
</div>
<!-- panel-wrapper -->

Upvotes: 1

Views: 1521

Answers (5)

Repo
Repo

Reputation: 1745

In your css start off by hiding ".close" instead of ".show".

Now in your init function, set the css bottom attr of your panel wrapper.

Done. =)

Now your panel is closed on load and your logic is intact =)

(function($) {

  jQuery(document).ready(function() {

    Panel.init();

    $(document).on('click', '.tab-controller', function() {
      Panel.togglePanel();
    });

  });

  var Panel = {

    isVisible: false,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',

    init: function() {
        $('.panel-wrapper').css("bottom", -(Panel.getAnimationOffset()));
    },

    hidePanel: function() {
      $('.panel-wrapper').animate({
        bottom: -(Panel.getAnimationOffset())
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = false;
        Panel.updateTabMessage();
      });
    },

    showPanel: function() {
      $('.panel-wrapper').animate({
        bottom: 0
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = true;
        Panel.updateTabMessage();
      });
    },

    togglePanel: function() {
      ((this.isVisible) ? this.hidePanel : this.showPanel)();
    },

    updateTabMessage: function() {
      if (this.isVisible) {
        $('.tab-controller .close').show();
        $('.tab-controller .show').hide();
      } else {
        $('.tab-controller .close').hide();
        $('.tab-controller .show').show();
      }
    },

    getAnimationOffset: function() {
      return $('.panel-content').height();
    }

  }
})(jQuery);
.panel-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-wrapper {
  position: fixed;
  left: 0;
  bottom: -100px;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}
.panel-controller {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tab-controller {
  float: right;
  margin-right: 50px;
  padding: 10px 10px 5px;
  background-color: #8C293B;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
}
.tab-controller * {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.tab-controller .close {
  display: none;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  background-color: #8C293B;
}
.panel-content .content {
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-wrapper">
  <div class="panel-controller">
    <div class="tab-controller">
      <span class="close">CLOSE PANEL</span>
      <span class="show">OPEN PANEL</span>
    </div>
    <!-- tab-controller -->
  </div>
  <!-- panel-controller -->
  <div class="panel-content">
    <div class="content clearfix">
      <div>This
        <br/>Space
        <br/>is
        <br/>inside
        <br/>panel.</div>
    </div>
    <!-- content -->
  </div>
  <!-- panel-content -->
</div>
<!-- panel-wrapper -->

Upvotes: 1

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

In page load you can call hidePanel() function it will work.

(function($) {

  jQuery(document).ready(function() {

    Panel.init();


    $(document).on('click', '.tab-controller', function() {
      Panel.togglePanel();

    });

  });

  var Panel = {

    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',

    init: function() {

/*add this code*/

  $('.panel-wrapper').css("bottom", -$('.panel-content').height() + 'px');
    $(".close").css("display", "none");
    $(".show").css("display", "inline");

    },

    hidePanel: function() {
      $('.panel-wrapper').animate({
        bottom: -(Panel.getAnimationOffset())
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = false;
        Panel.updateTabMessage();
      });
    },

    showPanel: function() {
      $('.panel-wrapper').animate({
        bottom: 0
      }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = true;
        Panel.updateTabMessage();
      });
    },

    togglePanel: function() {
      ((this.isVisible) ? this.hidePanel : this.showPanel)();
    },

    updateTabMessage: function() {
      if (this.isVisible) {
        $('.tab-controller .close').show();
        $('.tab-controller .show').hide();
      } else {
        $('.tab-controller .close').hide();
        $('.tab-controller .show').show();
      }
    },

    getAnimationOffset: function() {
      return $('.panel-content').height();
    }

  }
})(jQuery);
.panel-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  font-family: sans-serif;
}
.panel-controller {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.tab-controller {
  float: right;
  margin-right: 50px;
  padding: 10px 10px 5px;
  background-color: #8C293B;
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
}
.tab-controller * {
  display: block;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}
.tab-controller .show {
  display: none;
}
.panel-content {
  overflow: hidden;
  width: 100%;
  background-color: #8C293B;
}
.panel-content .content {
  overflow: hidden;
  margin: 0 auto;
  max-width: 900px;
  width: 98%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-wrapper">
  <div class="panel-controller">
    <div class="tab-controller">
      <span class="close">CLOSE PANEL</span>
      <span class="show">OPEN PANEL</span>
    </div>
    <!-- tab-controller -->
  </div>
  <!-- panel-controller -->
  <div class="panel-content">
    <div class="content clearfix">
      <div>This
        <br/>Space
        <br/>is
        <br/>inside
        <br/>panel.</div>
    </div>
    <!-- content -->
  </div>
  <!-- panel-content -->
</div>
<!-- panel-wrapper -->

Upvotes: 0

Nageshwari P
Nageshwari P

Reputation: 35





      
          (function($) {
      
            jQuery(document).ready(function() {
      
              Panel.init();
      
              $(document).on('click', '.tab-controller', function() {
 
  if( $(".panel-content").hasClass('hidden'))
  {
      $(".panel-content").removeClass('hidden').addClass('open');
      $(".tab-controller .show").css('display','none');
  $(".tab-controller .close").css('display','block');
  } else {  $(".panel-content").removeClass('open').addClass('hidden');
      $(".tab-controller .show").css('display','block');
  $(".tab-controller .close").css('display','none'); }
   
             
              });
      
            });
      
            var Panel = {
      
              isVisible: true,
              showMessage: null,
              hideMessage: null,
              animationDuration: 650,
              animationEasing: 'linear',
      
              init: function() {
      
              },
      
              hidePanel: function() {
                $('.panel-wrapper').animate({
                  bottom: -(Panel.getAnimationOffset())
                }, Panel.animationDuration, Panel.animationEasing, function() {
                  Panel.isVisible = false;
                  Panel.updateTabMessage();
                });
              },
      
              showPanel: function() {
                $('.panel-wrapper').animate({
                  bottom: 0
                }, Panel.animationDuration, Panel.animationEasing, function() {
                  Panel.isVisible = true;
                  Panel.updateTabMessage();
                });
              },
      
              togglePanel: function() {
                ((this.isVisible) ? this.hidePanel : this.showPanel)();
              },
      
              updateTabMessage: function() {
                if (this.isVisible) {
                  $('.tab-controller .close').show();
                  $('.tab-controller .show').hide();
                } else {
                  $('.tab-controller .close').hide();
                  $('.tab-controller .show').show();
                }
              },
      
              getAnimationOffset: function() {
                return $('.panel-content').height();
              }
      
            }
          })(jQuery);
      
      


      
          .panel-wrapper * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
          }
          .panel-wrapper {
            position: fixed;
            left: 0;
            bottom: 0;
            overflow: hidden;
            width: 100%;
            font-family: sans-serif;
          }
          .panel-controller {
            position: relative;
            overflow: hidden;
            width: 100%;
          }
          .tab-controller {
            float: right;
            margin-right: 50px;
            padding: 10px 10px 5px;
            background-color: #8C293B;
            -webkit-border-radius: 15px 15px 0 0;
            -moz-border-radius: 15px 15px 0 0;
            border-radius: 15px 15px 0 0;
          }
          .tab-controller * {
            display: block;
            font-family: sans-serif;
            font-size: 16px;
            font-weight: bold;
            color: white;
            cursor: pointer;
          }
          .tab-controller .close{
            display: none;
          }
          .panel-content {
            overflow: hidden;
            width: 100%;
            background-color: #8C293B;
          }
          .panel-content .content {
            overflow: hidden;
            margin: 0 auto;
            max-width: 900px;
            width: 98%;
          }
      
      .hidden
      {
      display:none;
      }
  
   .open
      {
      display:block;
      }
      
      


      
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <div class="panel-wrapper">
            <div class="panel-controller">
              <div class="tab-controller">
                <span class="close">CLOSE PANEL</span>
                <span class="show">OPEN PANEL</span>
              </div>
              <!-- tab-controller -->
            </div>
            <!-- panel-controller -->
            <div class="panel-content hidden">
              <div class="content clearfix">
                <div>This
                  <br/>Space
                  <br/>is
                  <br/>inside
                  <br/>panel.</div>
              </div>
              <!-- content -->
            </div>
            <!-- panel-content -->
          </div>
          <!-- panel-wrapper -->

Upvotes: 0

Ahs N
Ahs N

Reputation: 8366

Change this:

init: function() {

},

to this:

init: function () {
    $('.panel-wrapper').css("bottom", -$('.panel-content').height() + 'px');
    $(".close").css("display", "none");
    $(".show").css("display", "inline");
},

Change this:

isVisible: true,

to this:

isVisible: false,

Move Panel.init(); right before })(jQuery);

Here is the JSFiddle demo

Upvotes: 0

Lelio Faieta
Lelio Faieta

Reputation: 6663

I guess that you can do two things.

 var Panel = {
    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',
    init: function() {
    },

first try setting isVisible: false that should set the visibility as hidden on load. If this is not working you can revert the first edit and add in your init function 

 var Panel = {
    isVisible: true,
    showMessage: null,
    hideMessage: null,
    animationDuration: 650,
    animationEasing: 'linear',
    init: function() {
        Panel.hidePanel();
    },

Upvotes: 0

Related Questions