How do I start with the tab expanded (toggle)?

Question

So I am modifying a web page and there is a table on the bottom of the page that starts minimized. When you click the arrow it opens upward to reveal the table. I am attempting to modify it so that it already starts off opened when the page loads.

HTML Snippet:

<div class="row" id="cp-toggle">
    <div class="col-sm-12">
      <div class="col-sm-2 col-sm-offset-5 toggle-button">
        <a><span class="glyphicon glyphicon-chevron-up"></span></a>
      </div>
      <div class="col-sm-12" style="height: calc(100% - 25px);max-height: 250px;background-color:#d3d3d3;">
        <div style="height: 100%;max-height: 250px;">
          <div style="height: 25px;padding-top: 4px;">
            <div style="float: left;padding-right: 9px;">
              <span> Posts: </span> <span id="posts_count"></span>
            </div>
          </div>
          <div style="overflow-y: scroll;height: 100%;max-height: 225px;">
            <table id="result_table" class="table" style="display:table;" >
              <thead class="result_thead"></thead>
              <tbody class="result_tbody"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

Javascript:

var control_panel= (function(){
  var container = $('#cp-toggle div:first-child');
  var btn = $('#cp-toggle div:first-child').find("div").first();
  var table_panel = $('#cp-toggle div:first-child div:nth-child(2)').first();
  var open_css = "glyphicon-chevron-up";
  var close_css = "glyphicon-chevron-down";
  var open = function(){
    container.find("span").first().switchClass(open_css, close_css);
    var h = table_panel.height() + 25;
    container.css("top", "calc(100% - "+ h +"px)");
  };
  var close = function(){
    container.find("span").first().switchClass(close_css, open_css);
    container.css("top", "calc(100% - 25px)")
  };

  var isOpen = function(){
    return _.contains(container.find("span").first().attr('class').split(/\s+/), close_css);
  };

  var toggle = function(){
    if (isOpen()){
      close();
    } else {
      open();
    }
  };

  btn.on('click', toggle);

  return {
    open: open,
    close: close,
    toggle: toggle,
    isOpen : isOpen
  };
}());

CSS Snippet:

#cp-toggle > div:first-child {
    top: calc(100% - 25px);
    position: fixed;
    z-index: 25;
}

.toggle-button {
    height: 25px;
    padding-top: 3px;
    background-color: #d3d3d3;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    text-align: center;
    cursor: pointer;
}

#cp-toggle a {
    color: #111;
}

#cp-toggle a:hover {
    color: #777;
}
.tab-pane { height: 100%;}
#email-body { height: calc(100% - 80px); }
.body-view { height: 100%; overflow-y: scroll; }

.marked {
    color: #ffd700;
}
.marked:hover {
    color: #ffd700;
}

I have tried modifying the javascript to call control_panel.open(); at the end. I have tried altering the toggle to start with open();. None of these seem to have any effect on the code. I am not sure if I am looking in the correct area or if I am doing something incorrectly.

Answer 1

Try this (you tried something similar in a comment, but I'll explain in a minute...):

<script>
    window.addEventListener('load', function() {
        control_panel.open();
    });
</script>

The problem with your original attempt...

<script>onLoad=control_panel.open();</script>

... was that it was setting a variable called 'onLoad' with the value of whatever was returned by running the function control_panel.open(), which it did immediately instead of waiting until the page was loaded. Instead, in my example I'm setting an 'onload' listener on the window, so that when the window finishes loading, then it'll run the control_panel.open() function that it is now aware of.