The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Simple Hide And Show Div Box, Need Help With Javascripting
crampz
post Dec 6 2006, 04:25 PM
Post #1





Group: Members
Posts: 2
Joined: 6-December 06
Member No.: 1,225



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 13 2006, 08:42 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tport_rti
post Sep 4 2009, 02:59 PM
Post #3





Group: Members
Posts: 1
Joined: 4-September 09
Member No.: 9,672



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2009, 06:15 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 5 2009, 05:51 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 6 2009, 08:12 AM
Post #6


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
crstjean
post Jul 17 2012, 03:29 PM
Post #7





Group: Members
Posts: 2
Joined: 17-July 12
Member No.: 17,456



QUOTE(Christian J @ Sep 6 2009, 09:12 AM) *

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 17 2012, 04:55 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(crstjean @ Jul 17 2012, 10:29 PM) *

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

You mean just below each P element?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
crstjean
post Jul 18 2012, 08:20 AM
Post #9





Group: Members
Posts: 2
Joined: 17-July 12
Member No.: 17,456



QUOTE(Christian J @ Jul 17 2012, 05:55 PM) *

QUOTE(crstjean @ Jul 17 2012, 10:29 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 18 2012, 06:01 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 19 2012, 09:30 AM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ejameson
post Aug 26 2013, 03:30 PM
Post #12





Group: Members
Posts: 3
Joined: 26-August 13
Member No.: 19,622



QUOTE(Darin McGrew @ Jul 19 2012, 09:30 AM) *

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



I pray that this thread is still being monitored...

I a horrid at JS and need help.

I love this script and need a slight alteration but after trying and failing for about 4 days now, I am unable to resolve my issue. I need to be able to float a custom button to the right and have the sections text to the left.

So you would have:

Title ------------------------------------------------------------------------------------------------------- Button(expand all/collapse all)

Section Header ------------------------------------------------------------------------------------------------- Button(expanded button 1)
Sub Section - Link
Sub Section - Link
Sub Section - Link
Section Header ------------------------------------------------------------------------------------------------- Button(collapsed button 2)



Please assist... sad.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ejameson
post Aug 27 2013, 02:32 PM
Post #13





Group: Members
Posts: 3
Joined: 26-August 13
Member No.: 19,622



I tried modifying the var and no go...

CODE

var show_all= document.getElementById("../images/plus.png").src;
var hide_all= document.getElementById("../images/minus.png").src;
var show_details= document.getElementById("../images/plus-1.png").src;
var hide_details= document.getElementById("../images/minus-1.png").src;


Obviously, this is not working. Is there another way to easily replace the labels with a custom image?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 27 2013, 03:54 PM
Post #14


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(ejameson @ Aug 26 2013, 10:30 PM) *

I need to be able to float a custom button to the right and have the sections text to the left.

Can't you use CSS for that? The latest version of the script uses link elements as buttons inside "div.toggle", so you might be able to style them with

CODE
div.toggle a {...}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 27 2013, 04:06 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(ejameson @ Aug 27 2013, 09:32 PM) *

I tried modifying the var and no go...

CODE

var show_all= document.getElementById("../images/plus.png").src;
var hide_all= document.getElementById("../images/minus.png").src;
var show_details= document.getElementById("../images/plus-1.png").src;
var hide_details= document.getElementById("../images/minus-1.png").src;


Obviously, this is not working. Is there another way to easily replace the labels with a custom image?

In my script the above variables are used as link text on the link "buttons", the actual link elements are created further down the script. If you want to use image file paths in the variables (like in your example above) you must also create IMG elements instead of links, and change the IMG SRC values instead of the links text when the buttons are clicked. I haven't tested this though.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ejameson
post Aug 28 2013, 12:02 PM
Post #16





Group: Members
Posts: 3
Joined: 26-August 13
Member No.: 19,622



Thank you for the input Christian.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:07 PM