4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Hiding more info with javascript

by Tsarina
3 replies
Hi,
I would like to have a hidden area of the page that is closed unless clicked to be open like here _arborwell.com on the bottom "more information" in my wp hosted blog.
How do i do that?
Tsarina
#hiding #info #javascript
  • Profile picture of the author cpaul
    Originally Posted by Tsarina View Post

    Hi,
    I would like to have a hidden area of the page that is closed unless clicked to be open like here _arborwell.com on the bottom "more information" in my wp hosted blog.
    How do i do that?
    Tsarina
    Put your content in a div, then use the following javascript function to show/hide the content:

    HTML Code:
    <script language="javascript">

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { 
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

</script>
    Then use this to show/hide

    HTML Code:
    <a href="#" onclick="showhide('div1');">Show/hide me</a>

<div id="div1" style="display: none;">This is the content</div>
    Or, use the folloowing

    HTML Code:
    <script language=javascript type='text/javascript'>
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[i].visibility = 'hidden';
}
}
}

function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible';
}
}
}
</script>
    Then, to show/hide

    HTML Code:
    <div id="content">
Content goes here
</div> 

<a href="javascript:hidediv('content')">hide</a>
<a href="javascript:showdiv('content')">Show</a>
    {{ DiscussionBoard.errors[1881108].message }}
  • Profile picture of the author jamespitt
    You can do some very funky things like this with jquery as well. It makes you look very professional. First example I could find is here - Show and hide an element with jQuery - Part 1 of 2
    Signature

    Get your totally free outsourcing guide here..

    Send me a PM if you want to hire top-calibre outsourced staff.

    {{ DiscussionBoard.errors[1885164].message }}

Trending Topics