Posted By

chippper on 07/21/09


Tagged

div javascript html sliding


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jillella
vali29


Sliding Div Function


 / Published in: JavaScript
 

This assumes HTML that looks like this:


        <div id="containing_div">
            <div id="div_1" style="background-color:red" class="visible_div">
                <p>Test Content 1</p>
            </div> <!-- div_1 -->
            <div id="div_2" style="background-color:blue">
                <p>Test Content 2</p>
            </div> <!-- div_2 -->
            <div id="div_3" style="background-color:yellow">
                <p>Test Content 3</p>
            </div> <!-- div_3 -->
        </div> <!-- containing div -->
              <ul id="test_buttons">
                <li><a href="#" id="div_1_link" onclick="slideDiv('div_1')" class="here">One</a></li>
                <li><a href="#" id="div_2_link" onclick="slideDiv('div_2')">Two</a></li>
                <li><a href="#" id="div_3_link" onclick="slideDiv('div_3')">Three</a></li>
            </ul> <!-- test_buttons -->

And CSS that looks like this:

    .hidden_div {
        display: none;
    }

    .visible_div {
        display: block;
    }

    #containing_div {
        width: 300px;
        background-color: #ddd;
        height: 300px;
        overflow:hidden;
    }
    #containing_div div {
        width: 300px;
        height: 300px;
    }

    #test_buttons {
        background-color: green;
        float: left;
        padding: 10px 0 10px 0;
    }

    #test_buttons li {
        display:inline;
        float: left;
        list-style-type:none;
        text-align: center;
    }
    #test_buttons li a {
        display: block;
        float: left;
        width: 50px;
        margin-left: 10px;
        height: 15px;
        background-color: white;
        padding: 8px 4px;
    }
    #test_buttons li a.here {
        background-color: orange;
    }
    #test_buttons li a.not_here{
        background-color: white;
    }

Change attributes at will, except for display: none or block.

  1. function slideDiv(divId) {
  2. var contDiv = document.getElementById('containing_div');
  3. var divs = contDiv.getElementsByTagName('div');
  4.  
  5. for (var x = 0; x < divs.length; x++){
  6. if (divs[x].id != divId) {
  7. divs[x].className = "hidden_div";
  8. document.getElementById(divs[x].id+'_link').className = 'not_here';
  9. }
  10. else if (divs[x].id = divId) {
  11. divs[x].className = "visible_div";
  12. document.getElementById(divId+'_link').className = 'here';
  13. }
  14. }
  15. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: lounazareth on November 26, 2009

Hi! I´m trying to follow this example but when I test the code, the same doesn´t function. I´d really like some help to sove this problem...

Posted By: chippper on January 4, 2010

lounazareth-

I'm sorry I didn't see your question earlier - I just haven't logged in for a while.

My code was all kinds of screwed up - the HTML and CSS, that is. The JavaScript was still fine. I've adjusted the HTML & CSS above, and that should work.

One note on the HTML - do remove the style attributes on the Divs. They're only there to make the change visible.

You need to login to post a comment.