Upward sliding Div | SiteApex Support
Developer Tools
Upward Sliding Div
This example shows a simple open/close div that smoothly slides to open and close. It uses jquery and jquery UI.

Open example in a new window

There are several parts needed to make this work. Firstly, one needs to add the jquery includes. In the demo, we are calling them directly from the jquery website, but SiteApex also includes local versions of the jquery.js and jquery-ui.js files that are preferred (they include additional code to prevent conflicts between plugins and modules). The jquery style include should be placed in the page header, but the javascript includes can be placed at the bottom of the template (to improve page loading).

<script src="./javascript/jquery.js"></script>
<script src="./javascript/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">


They slider itself is a set of nested divs and content. The ID and class tags can be anything you want, but you need to make sure that the ones referenced by the javascript function match up. In our example, the sliding div is supposed to contain a small site search form.

<div id="search_box_container">
    <div id="search_box_title" class="search_box_title_open"></div>
    <div id="search_box_outer">
        <div id="search_box">
            content content content content content content content
        </div>
    </div>
</div>


The javascript function is fairly straight forward, with an optional toggle class for the open and close states. If the ID and class names are changed in the html code (above), the matching class and ID names need to be changed below.
<script type='text/javascript'>
$(window).load(function(){
  $('#search_box_title').click(function () {
    $('#search_box_container #search_box_outer').slideToggle({
      direction: "up"
    }, 300);
    $(this).toggleClass('search_box_title_close');
  }); // end click
});
</script>


The final piece to this puzzle is the styles. They can be embedded into the template or included in a separate style-sheet (preferred).
#search_box_container {
  position:absolute;
  right:105px;
  bottom:170px;
  width: 254px;
}

#search_box_title {
  cursor: pointer;
  width: 254px;
  height:35px;
}

.search_box_title_open { background-image: url(../images/search_title_open.png); }
.search_box_title_close { background-image: url(../images/search_title_close.png); }

#search_box_outer {
  background-image: url(../images/search-box2.png);
  width:254px;
  height:45px;
}

#search_box_container #search_box_outer { display: none; }

Hopefully this is fairly clear!

last updated Oct 16, 2013 - SMH