Simple Hide And Show Div Box, Need Help With Javascripting Options

[crampz]

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]

Made my own version of this, don't know if it's useful to you. Coding might be a bit superfluous.

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]

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]

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!

(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.

(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]

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]

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>

[crstjean]

Here's one more, with synchronized clickable SPAN elements:

...

Christian, how might I change this code so that the "Hide item" span appears above the text content of each div? I've tried to change it myself but I don't really know what I'm doing in Javascript... Hope you still frequent this site!

[Christian J]

so that the "Hide item" span appears above the text content of each div?

You mean just below each P element?

[crstjean]

so that the "Hide item" span appears above the text content of each div?

You mean just below each P element?

Yes, just below each P element and just above each inner div.

[Christian J]

See if this works:

CODE

<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';

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

function toggle(container, action)
{
    if(action=='toggle')
    {
        var child=container.getElementsByTagName('div')[0];
        if(child.style.display=='none')
        {
            child.style.display='block';
        }
        else if(child.style.display=='block')
        {
            child.style.display='none';
        }
    }

    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++)
        {
            if(div[i].className=='toggle')
            {
                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';

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

    // global button
    if(all_shown=='yes')
    {
        toggle_all.lastChild.firstChild.nodeValue=hide_all;
    }
    else if(all_hidden=='yes')
    {
        toggle_all.lastChild.firstChild.nodeValue=show_all;
    }
}

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

// intialize individual sections
for(var i=0; i<div.length; i++)
{
    if(div[i].className=='toggle')
    {
        // hide section on page load
        div[i].getElementsByTagName('div')[0].style.display='none';

        // make toggle button
        var individual_toggle=document.createElement('a');
        individual_toggle.href='#';
        individual_toggle.appendChild(document.createTextNode(show_details));
        div[i].insertBefore(individual_toggle, div[i].getElementsByTagName('div')[0]);

        individual_toggle.onclick=function()
        {
            toggle(this.parentNode, 'toggle');
            return false;
        }
    }
}

// make global toggle button
var toggle_all=document.getElementById('toggle_all');
var global_toggle=document.createElement('a');
global_toggle.href='#';
global_toggle.appendChild(document.createTextNode(show_all));
toggle_all.appendChild(global_toggle);
global_toggle.onclick=function()
{
    toggle(toggle_all, 'toggle_all');
    return false;
}
</script>

BTW I changed the clickable SPAN elements into links, since I believe that's more usable.

[Darin McGrew]

BTW I changed the clickable SPAN elements into links, since I believe that's more usable.

Yep. And more accessible. Clickable SPAN elements often don't work with screen readers.