Friendstertutorials.com » Show/Hide Effect

Show/Hide Effect

Contributed by >-Patrick-> on November 11th, 2008 Categories: Javascript Codes, Tricks and Tweaks

3,838 Views

(+11 rating, 6 votes)

Loading ...

Copy the codes below and paste it in your JS File.

function onProfileLoad() {

// CONTROLPANEL
   h=document.getElementById("controlpanel_header");
   h.innerHTML="<a href=\"#\" onClick=\"show_hide('content_0'); return false\"><div >"+pageOwnerFName+"</div></a>";
   show_hide('content_0');

// MOREABOUT
   h=document.getElementById("6").getElementsByTagName("h2")[0];
   h.innerHTML="<a href=\"#\" onClick=\"show_hide('content_6'); return false\"><div>More About "+pageOwnerFName+"</div></a>";
   show_hide('content_6');

// PUBLICCOMMENTS
   h=document.getElementById("18").getElementsByTagName("h2")[0];
   h.innerHTML="<a href=\"#\" onClick=\"show_hide('content_18'); return false\"><div>Testimonials and Comments for "+pageOwnerFName+"</div></a>";
   show_hide('content_18');

// FRIENDS
   h=document.getElementById("2").getElementsByTagName("h2")[0];
   h.innerHTML="<a href=\"#\" onClick=\"show_hide('content_2'); return false\"><div>"+pageOwnerFName+"\'s Friends</div></a>";
   show_hide('content_2');

// WIDGETS
   h=document.getElementById("3972_798109457").getElementsByTagName("h2")[0];
   h.innerHTML="<a href=\"#\" onClick=\"show_hide('content_3972_798109457'); return false\"><div>"+pageOwnerFName+"\'s Widgets</div></a>";
   show_hide('content_3972_798109457');

}

if (!attachOnLoadHandler(function(){onProfileLoad()})) window.onload = function(){onProfileLoad()};
function addBox (type,head,htm,id,sibling) {
//by marfillaster

//type "LEFT" | "RIGHT"
//head header string
//htm innerHTML string
//id css_id string
//sibling css_id_insertbefore string | null
/* Available default Siblings
    LEFT
        0 = controlpanel
        1 = photos
        13 = blogs
        12 = reviews
        6 = moreabout
        18 = publiccomments
        10 = scrapbook
    RIGHT
        15 = meettrail
        2 = friends
        14 = googleads
        7 = fan
        8 = groups
    null - appends to last
*/
   
    try {
        var li=document.createElement("li");
    } catch(e) {
        var li=document.createElement("<li>");
    }
    if(type=="LEFT") {
        var ul=document.getElementById("0").parentNode.parentNode;
        htm="<div class='boxcontent'>"+htm+"</div>";
    }
    else var ul=document.getElementById("2").parentNode.parentNode;
   
    li.innerHTML="<div id='"+id+"' class='commonbox "+id+"'>"+
                    "<h2>"+head+"</h2>"+
                    "<div id='content_"+id+"'>"+
                        htm+
                    "</div>"+
                    "</div>";
                   
    if(sibling==null) ul.appendChild(li);
    else {
        sibling=document.getElementById(sibling).parentNode;
        ul.insertBefore(li,sibling);
    }
}

function show_hide(the_box) {
   if (document.getElementById(the_box)) {
      if (document.getElementById(the_box).style.display == 'none') {
        document.getElementById(the_box).style.display = 'block';
      }
      else {
        document.getElementById(the_box).style.display = 'none';
      }
   }
}

Share This Tutorial:

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks