Help - Search - Members - Calendar
Full Version: Simple Hide And Show Div Box
HTMLHelp Forums > Programming > Client-side Scripting
crampz
Dec 6 2006, 04:25 PM
hi I have this website with about 20 products a page and alot of pages , so i had this simple hide and show box put in show information is hidden or shown. each hidden and shown box gets its own ID mine is called info_(no.) . (no.) - being from 2+ . these open up fine on there own but i also want one at the top which will open them all up and close them all with one click but still keeping the seperate ones as well.

This is The Main Code That has to be at the top before the body tag of each page

<script language="javascript">
function show_hide(divID){
var divArea = document.getElementById(divID)
var divAreaImg = document.getElementById(divID+"_img")
var divAreaVisible = divArea.style.display != "none"

if(divAreaVisible){
divArea.style.display = "none"
divAreaImg.innerHTML = "<img src='/EN/Script/plus.jpg' border='0'>"
}else{
divArea.style.display = ""
divAreaImg.innerHTML = "<img src='/EN/Script/minus.jpg' border='0'>"
}
}

function show_hide_text(divID){
var divArea = document.getElementById(divID)
var divAreaImg = document.getElementById(divID+"_img")
var divAreaVisible = divArea.style.display != "none"

if(divAreaVisible){
divArea.style.display = "none"
divAreaImg.innerHTML = "+"
}else{
divArea.style.display = ""
divAreaImg.innerHTML = "−"
//ADDED TO CLOSE ANY EXPANDED SECTIONS
close_others(divID)
}

}

function close_others(divID){
var span_tags = document.getElementsByTagName("span")
for(i=0;i<span_tags.length;i++){
//alert(span_tags[i].getAttribute('id')+" "+divID)
if(span_tags[i].getAttribute('id') != divID){
if(span_tags[i].getAttribute('id').indexOf('_img') == -1){
span_tags[i].style.display = 'none'
document.getElementById(span_tags[i].getAttribute('id')+"_img").innerHTML = "+"
}
}
}
}
</script>

And this is the code that is the show and hide div box:

<!--Start Of Show / Hide Box-->
<div align="center">
<a href="java script:void(0);" onClick="show_hide('info_2');"><span id="info_2_img><span id="info_2_img><img src="Script/plus.jpg" width="9" height="9" border="0"></span></a>
More Info
<tr>
<td valign="top"><div id="info_1" style="display:none;">
</div></div>
<!--End Of Show / Hide Box-->

As you can see i have set it up so div box with the ID info_2 opens and close . this one is called info_1 because this is the main one which will open and close all .

onClick="show_hide('info_2');"><span id="info_2_img> this bit opens div box id info_2

I need help with coding this piece of code so that it can open and close more than just one. Please Help. Thank You
Christian J
Dec 13 2006, 08:42 AM
Made my own version of this, don't know if it's useful to you. Coding might be a bit superfluous. blush.gif

HTML code (the H1 element's ID is used for the "Show/Hide all" buttons, other elements than a H1 might be used):
CODE
<h1 id="toggle_all">Toggle items script</h1>
<p>Lets you open or close either single items or all at once. Buttons are synchronized.</p>

<div>
    <h2 class="toggle">Header</h2>
    <div>
    text
    </div>
</div>

<div>
    <h2 class="toggle">Header</h2>
    <div>
    text
    </div>
</div>

<div>
    <h2 class="toggle">Header</h2>
    <div>
    text
    </div>
</div>


Put this javascript anywhere after the toggled HTML items:

CODE
<script type="text/javascript">
// simple object detection
if(
document.createElement && document.getElementById &&
!(window.opera && !document.createComment) // only Opera7+
)
{
    init();
}


function init()
{
    // Button texts:
    var show='Show details';
    var hide='Hide details';
    var show_all='Show all';
    var hide_all='Hide all';

    function toggle(cur_item, toggle_method)
    {
        var div=cur_item.parentNode.getElementsByTagName('div')[0];

        if(toggle_method=='show')
        {
            div.style.display='block';
        }
        else if(toggle_method=='hide')
        {
            div.style.display='none';
        }

    }

    function sync(toggle_method)
    {
        var show_all=document.getElementById('show_all');
        var hide_all=document.getElementById('hide_all');

        if(toggle_method=='show')
        {
            show_all.disabled=true;
            hide_all.disabled=false;
            for(var i=0; i<h2.length; i++)
            {
                if(h2[i].parentNode.getElementsByTagName('div')[0].style.display=='none')
                {
                    show_all.disabled=false;
                    hide_all.disabled=true;
                }
                else if(h2[i].parentNode.getElementsByTagName('div')[0].style.display=='block')
                {
                    h2[i].lastChild.previousSibling.disabled=true;
                    h2[i].lastChild.disabled=false;
                }
            }
        }
        else if(toggle_method=='hide')
        {
            show_all.disabled=false;
            hide_all.disabled=true;
            for(var i=0; i<h2.length; i++)
            {
                if(h2[i].parentNode.getElementsByTagName('div')[0].style.display=='block')
                {
                    show_all.disabled=true;
                    hide_all.disabled=false;
                }
                else if(h2[i].parentNode.getElementsByTagName('div')[0].style.display=='none')
                {
                    h2[i].lastChild.previousSibling.disabled=false;
                    h2[i].lastChild.disabled=true;
                }
            }
        }
    }


    var toggle_all=document.getElementById('toggle_all');
    var h2=document.getElementsByTagName('h2');

    //show all
    var show_all_button=document.createElement('input');
    show_all_button.type='button';
    show_all_button.value=show_all;
    show_all_button.id='show_all';
    toggle_all.appendChild(show_all_button);
    show_all_button.onclick=function()
    {
        for(var i=0; i<h2.length; i++)
        {
            if(h2[i].className=='toggle')
            {
                toggle(h2[i], 'show');
                this.disabled=true;
                document.getElementById('hide_all').disabled=false;
            }
        }
        sync('show');
    }

    // hide all
    var hide_all_button=document.createElement('input');
    hide_all_button.type='button';
    hide_all_button.value=hide_all;
    hide_all_button.id='hide_all';
    hide_all_button.disabled=true;
    toggle_all.appendChild(hide_all_button);
    hide_all_button.onclick=function()
    {
        for(var i=0; i<h2.length; i++)
        {
            if(h2[i].className=='toggle')
            {
                toggle(h2[i], 'hide');
                this.disabled=true;
                document.getElementById('show_all').disabled=false;
            }
        }
        sync('hide');
    }


    // toggle selected
    for(var i=0; i<h2.length; i++)
    {
        if(h2[i].className=='toggle')
        {
            h2[i].parentNode.getElementsByTagName('div')[0].style.display='none';

            var show_button=document.createElement('input');
            show_button.type='button';
            show_button.value=show;
            h2[i].appendChild(show_button);

            var hide_button=document.createElement('input');
            hide_button.type='button';
            hide_button.value=hide;
            hide_button.disabled=true;
            h2[i].appendChild(hide_button);

            show_button.onclick=function()
            {
                this.disabled=true;
                this.nextSibling.disabled=false;
                toggle(this.parentNode, 'show');
                sync('show');
            }

            hide_button.onclick=function()
            {
                this.disabled=true;
                this.previousSibling.disabled=false;
                toggle(this.parentNode, 'hide');
                sync('hide');
            }

        }
    }
}
</script>
tport_rti
Sep 4 2009, 02:59 PM
Christian J...

You have no idea how tirelessly I have searched for this kind of script! Now, the problem is I need to reformat the hide all/show all and place them differently... Can't figure out how to do that. I don't know if you're still out there in cyberland... but I can't believe my good fortune to even find this wonderful script.

Basically I want it similar to this:

(at the top - just links/no buttons) Expand All | Collapse All

(divs this way with Expand/Hide links as words again)

Item
Hidden Item
Expand/Hide

Item
Hidden Item
Expand/Hide

Item
Hidden Item
Expand/Hide
Christian J
Sep 5 2009, 06:15 AM
QUOTE(tport_rti @ Sep 4 2009, 09:59 PM) *

I don't know if you're still out there in cyberland... but I can't believe my good fortune to even find this wonderful script.

I'm here! wub.gif

QUOTE
(at the top - just links/no buttons) Expand All | Collapse All

The simplest way is to just style the INPUT elements to look like text with CSS.

Replacing the form buttons with "real" text would be more difficult, since the script currently relies on the buttons' DISABLED attribute, which is only supported by form elements.

QUOTE
(divs this way with Expand/Hide links as words again)

Item
Hidden Item
Expand/Hide

Item
Hidden Item
Expand/Hide

Item
Hidden Item
Expand/Hide

As a quick fix, try changing the HTML to

CODE
<div>
    <h2>Header</h2>
    <div>
    text
    </div>
    <span class="toggle"></span>
</div>

and replace all references to "h2" with "span" in the script.

Christian J
Sep 5 2009, 05:51 PM
Here's a version with clickable SPAN elements instead of buttons. Unlike the version with buttons above, the SPAN elements don't indicate which one is clicked.

CODE
<h1 id="toggle_all">Toggle items script</h1>
<div class="toggle">
    <div>text</div>
</div>

<div class="toggle">
    <div>text</div>
</div>

<div class="toggle">
    <div>text</div>
</div>

<script type="text/javascript">
function toggle(container, action)
{
    if(action=='show')
    {
        container.getElementsByTagName('div')[0].style.display='block';
    }
    else if(action=='hide')
    {
        container.getElementsByTagName('div')[0].style.display='none';
    }
    else if(action=='show_all' || action=='hide_all')
    {
        for(var i=0; i<div.length; i++)
        {
            if(div[i].className=='toggle' && action=='show_all')
            {
                toggle(div[i], 'show');
            }
            else if(div[i].className=='toggle' && action=='hide_all')
            {
                toggle(div[i], 'hide');
            }
        }
    }
}

function make_control(container, label_text, action)
{
    var span=document.createElement('span');
    span.appendChild(document.createTextNode(label_text));
    span.className='control';
    container.appendChild(span);
    span.onclick=function()
    {
        toggle(container, action);
    }
}

var toggle_all=document.getElementById('toggle_all');
make_control(toggle_all, 'Show all', 'show_all');
make_control(toggle_all, 'Hide all', 'hide_all');

var div=document.getElementsByTagName('div');
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].getElementsByTagName('div')[0].style.display='none';
        make_control(div[i], 'Show details', 'show');
        make_control(div[i], 'Hide details', 'hide');
    }
}
</script>
Christian J
Sep 6 2009, 08:12 AM
Here's one more, with synchronized clickable SPAN elements:

CODE
<h1 id="toggle_all">Toggle items script</h1>
<p>Lets you open or close either single items or all at once. Buttons are synchronized.</p>

<div class="toggle">
<p>foo</p>
    <div>text</div>
</div>

<div class="toggle">
<p>bar</p>
    <div>text</div>
</div>

<div class="toggle">
<p>baz</p>
    <div>text</div>
</div>

<script type="text/javascript">
/*--- Text labels (can be customized)---*/

var show_all='Show all items';
var hide_all='Hide all items';
var show_details='Show item';
var hide_details='Hide item';

/*--------------------------------------*/

var div=document.getElementsByTagName('div');

function toggle(container, action)
{
    var child=container.getElementsByTagName('div')[0];
    var label_text=container.lastChild.firstChild.nodeValue;
    if(action=='toggle' && child.style.display=='none')
    {
        child.style.display='block';
    }
    else if(action=='toggle' && child.style.display=='block')
    {
        child.style.display='none';
    }
    else if(action=='toggle_all')
    {
        var global_label_text=toggle_all.lastChild.firstChild.nodeValue;
        if(global_label_text==show_all)
        {
            var display_value='block';
            toggle_all.lastChild.firstChild.nodeValue=hide_all;
        }
        else if(global_label_text==hide_all)
        {
            var display_value='none';
            toggle_all.lastChild.firstChild.nodeValue=show_all;
        }
        for(var i=0; i<div.length; i++)
        {
            var child=div[i].getElementsByTagName('div')[0];
            if(div[i].className=='toggle')
            {
                child.style.display=display_value;
            }
        }
    }

    // synchronize buttons
    var all_shown='yes';
    var all_hidden='yes';
    for(var i=0; i<div.length; i++)
    {
        var child=div[i].getElementsByTagName('div')[0];
        if(div[i].className=='toggle' && child.style.display=='none')
        {
            div[i].lastChild.firstChild.nodeValue=show_details;
            all_shown='no';
        }
        else if(div[i].className=='toggle' && child.style.display=='block')
        {
            div[i].lastChild.firstChild.nodeValue=hide_details;
            all_hidden='no';
        }
    }
    if(all_shown=='yes')
    {
        toggle_all.lastChild.firstChild.nodeValue=hide_all;
    }
    else if(all_hidden=='yes')
    {
        toggle_all.lastChild.firstChild.nodeValue=show_all;
    }
}

function make_control(container, action)
{
    var span=document.createElement('span');
    span.className='control';
    container.appendChild(span);
    if(action=='toggle_all')
    {
        span.appendChild(document.createTextNode(show_all));
    }
    else if(action=='toggle')
    {
        span.appendChild(document.createTextNode(show_details));
    }
    span.onclick=function()
    {
        toggle(container, action);
    }
}

var toggle_all=document.getElementById('toggle_all');
make_control(toggle_all, 'toggle_all');

for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        div[i].getElementsByTagName('div')[0].style.display='none';
        make_control(div[i], 'toggle');
    }
}
</script>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.