A “div” tag is used in webpages to “divide” content. The basic syntax is

<div> content </div>

This post will show you a creative way to use divs with HTML5 and javascript.

The image below uses Firefox’s 3D webpage view to shows where divs sit within our website in the light blue color.

2

The legend and page structure is as follows:

Capture

Today I would like to show a little device that we implemented in order to get a toggle up and toggle down function that hides the sidebar in any of the sidebar contents.

An addition to the javascript library, is a jQuery. What jQuery does is select different parts of a website to carry out different functions. The basic jQuery syntax is as follows:

$('.someDiv').function()})

With that in mind, to create the toggle on/off we made these two scripts (note that because the script is running within wordpress, we use “jQuery” instead of $):

jQuery('.sideToggleDown').live("click",function(){jQuery('.projectContent').slideDown()})
jQuery('.sideToggleUp').live("click",function(){jQuery('.projectContent').slideUp()})

And here are the locations of the “sideToggleDown” and the “sideToggleUp” divs that are referenced by the jQuery:

<h1 id="title"></h1>
    <div class="sideToggleDown"><a style="font-size: 14px; align: top;" href="##">▼</a></div>
    <section>
        <div class ="content">
            <div class="sideToggleUp"><a href="##">▲</a></div>
        </div>
    </section>

So, as you can see, the div for sliding down sits above the content, which means it should appear above the other divs, but it does not? Why is that? Well… taking a look at another part of websites, called a Cascading Style Sheet (CSS)… we find that the sideToggleDown has a lower z-index, it makes the one in the lower div (sideToggleDown) positioned in front of sideToggleUp.

.sideToggleUp {
    height:26px;
    position:absolute;
    width:26px;
    background: #F15A23;
    bottom:0;
    top:0px;
    right:27px;
    z-index:10000;
    text-align: center;
    font-size: 32px;
}

.sideToggleDown {
    height:26px;
    position:absolute;
    width:26px;
    background: #F15A23;
    bottom:0;
    top:0px;
    right:27px;
    z-index:1000;
    text-align: center;
    font-size: 32px;
}

So, basically, when the lower div gets hidden, the slideDown div that is always on in the background is shown.

And there you have it, a little HTML trick for you to ponder about!

Live Example (click on the ▲)