Reveal Divs Content On Click

Question

I'm not really sure how to word what I'm looking for in search engine terms, so what I'm trying to do is:

I want to have a division, or two if that's what it takes, in the center of the page that when clicked seperates. Top portion slides up, bottom portion slides down and it reveals the website content in the middle.

---

---

---

I'm not exactly sure how word my search for something that does that properly. I've seen a few websites that have variations of this. Only ones that open left/right though. I'm sure this is difficult, but any help towards achieving this would be greatly appreciated.

Thanks in advance, Bc.

Answer 1

If you're using JQuery, you can simply use slideUp and slideDown on the target div.

Edit

Actually, in this case I think slideToggle is what you're looking for:

<script type='text/javascript'>
    $(document).ready(function() {
        $(".button").click(function() {
            $("#content).slideToggle();
        });
    });
</script>

<div class='button'>Top Panel</div>
<div id='content'>Content</div>
<div>Bottom Panel</div>

Answer 2

I think this is what you need : http://jsfiddle.net/WQCav/

HTML :

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS :

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS :

html,body
{
    width:100%;
    height:100%;
}

Answer 3

I just finished fixing this issue. I did not want the div to go over the material below it but shift it down. This will get the division splitting in half feel that you want - you will need something below the sliding div(like another div, or a div that has some invisible height to it and height on Auto in CSS to make it work for your main wrap.

Here is what I did:

My CSS:

.slide {
    height:200px;
    background-color: white;
    padding:20px;
    margin-top:10px;
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

}




#show_div {
    margin-left: 40px;
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border: 1px solid #333;
    font-size: 20px;


}

This was to make it look pretty. Below is more of the function:

.show_hide {
    display:none;

Coding: In the header I put the JQ function:

 $(document).ready(function(){

        $(".slide").hide();
        $(".show").show();

    $('.show').click(function(){
    $(".slide").slideToggle();
    });

});

​

Then in the div itself don't forget to place the actual good stuff that will style your div to perform the way you like:

<a id="show_div" href="#" class="show">Browse Styles</a>


    <div class="slide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, nibh at iaculis ultrices, mi eros tincidunt enim, vitae vehicula lectus odio a ipsum. Aliquam erat volutpat. Fusce id nisl sit amet diam iaculis pulvinar. Sed ultrices ullamcorper ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mi arcu, porta ut elementum et, ullamcorper sed eros. In euismod tellus sed ipsum adipiscing suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac magna dui. Aenean nec leo libero. Pellentesque lacinia dolor a dui lacinia consectetur. Mauris euismod porta magna, non dignissim orci adipiscing malesuada. Phasellus nunc sapien, consectetur nec vestibulum ac, euismod a ipsum.

    </div>
​

The main back draw on this is that you will need to place one instance of the Jscript for each div that you want to use this for, otherwise they will all activate at the same time. You can place the button(or link) anywhere on the page. I have a couple of them side by side and when clicked they split the page from the same location.

If you need multiple of these don't forget to give the divs unique ids and to change their name in the Jscript to make the magic happen.

HERE IS A JFIDDLE EXAMPLE: http://jsfiddle.net/vH3cK/1/

Hope that helps!

Answer 4

The first "div" should be composed of two different divs, one for the top part and another for the bottom. Your page content should be styled "display:none" at first. When the user clicks on the first div, show the page content using "$(selector).slideDown(500)". Would have to test it, but I think it should work like a charm. You could try using .show(), .toggle() and different ammounts of time (in miliseconds) to see what fits best.

Answer 5

jQuery .animate（）函数也可能值得研究-它使用CSS，这通常是更好的做法。