Q:

Tab DIVs docked within browser. Slide in and out of the screen with jquery when clicked

I have a couple things that I would like to do with the Divs seen in the picture attached that I have been unable to figure out. These Divs are docked in the bottom corner of the browser using CSS Positioning. I want to add a tab to each one using CSS and have it slide up and down on the screen when the user clicks on the tab portion with only the tab part showing when it is hidden. Right now, I have the (x) in the corner that hides the div. I would much rather have the header text on the tab rather than in the div.
Any help on making this div a tab and some thoughts on the jquery slidedown when closing would be helpful. Thanks.
.ib {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width:250px;
  height: 98%;
}
.narrow {
  width:150px;
}

    $(document).on('click', '#close1,#close2', function (e) {
        $(this).parent().fadeOut(500);

        e.stopPropagation();
    });

<footer id="footer" class="footer" runat="server">
    <div id="supportDiv" class="ib questionbg narrow" runat="server">
        <span id='close1'>x</span>
    </div>

    <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
        <span id='close2'>x</span>
        <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
        <div style="margin-left:20px; vertical-align:top">
            <asp:PlaceHolder id="documentList" runat="server"></asp:PlaceHolder>
        </div>
    </div>

</footer>

A:

So it's a little rough, but here I'm creating the tab control DOM elements with jQuery, and inserting them as the first child of the .ib tab element. Then I have the footer listening for clicks on the tab-control elements, and toggling the tabs as appropriate. The thing you want to be careful about is, if the user is selecting a different tab, toggle their last selection OFF when you toggle the new one ON.
As I say, it's a little rough. Haven't figured out why the slideToggle is breaking it out of its container el in the process of hiding the tab content, but otherwise it seems to be doing what you are looking for. Of course, you'll need to create some prettier CSS than I have. Again, rough.

/***
 * First, we have to create the tab-control functionality
 *  for each of our footer tab-panes
 ***/
$(".ib").each(function() {
  // For each tab, if it has a title, we can use that for our tab title.
  var tabEl = $(this);
  var tabTitle = tabEl.find(".helpheader").text();
  var leftPos = tabEl.index() * 130;
  // Create the tab control DOM structure...
  var tabBar = "<div class='tab-control'><span class='tab-title'>" + tabTitle + "</span></div>";
  // Insert that tab control as the first child of the tab.
  tabEl.children().first().before(tabBar);
  // Hide the rest of the tab elements, showing only the tab control.
  tabEl.find(":first-child").siblings().hide();
  // use the closedTab class on this tab
  tabEl.css("left", leftPos+"px").addClass("closedTab");
});


/****
 * Handler for clicks on the tab-control
 *  This should hide the tab-control, show the tab
 *  itself, change the class from closed to open, and
 *  reverse that process on any displayed siblings.
 ****/
$("#footer").on("click", ".tab-control", function() {
  // Get the specific tab element.
  var tabEl = $(this).parent();
  // hide the tab-control, and show the rest of the content.
  $(this).hide().siblings().show();
  // remove the closedTab class, add the openTab.
  tabEl.addClass("openTab").removeClass("closedTab");
  // This next line is doing a LOT -- it takes the current
  //  tabEl, and goes through any siblings marked as openTab,
  //  changes them from openTab to closedTab, and shows the
  //  tab-control and hides everything else.
  tabEl.siblings(".openTab")
    .removeClass("openTab")
    .addClass("closedTab")
    .find(":first-child")
    .show()
    .siblings()
    .slideToggle();
})
$("#footer").on('click', '.close', function(e) {
  // get the current tab element.
  var tabEl = $(this).parent();
  // toggle the current tab from openTab to closedTab.
  tabEl.addClass("closedTab").removeClass("openTab");
  // hide all content except the tab-control.
  tabEl.find(":first-child").show().siblings().slideToggle();
});
.footer {
  position: fixed;
  bottom: 0;
  height: 100px;
}
.ib {
  display: inline-block;
  position: absolute;
  bottom: 0;
}

.ib-content {
  margin-left: 20px;
  vertical-align: top;
  position: relative;
}

.tab-control {
  width: 120px;
  height: 20px;
  background: #FFFAEA;
  border: solid #cab781 1px;
  overflow: off;
}

.closedTab {
}

.openTab {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width: 250px;
  height: 50px;
}

.narrow {
  width: 150px;
}
.close {
  position: relative;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer" class="footer" runat="server">
  <div id="supportDiv" class="ib questionbg narrow" runat="server">
    <span class='close'>x</span>
    <div class='ib-content'>
      <p>Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Nulla quis
        lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada.</p>
    </div>
  </div>

  <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
    <span class='close'>x</span>
    <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
    <div class='ib-content'>
      <p>Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla
        porttitor accumsan tincidunt.</p>
    </div>
  </div>

</footer>

