Show/Hide Multiple DIVs in a variable

Question

I am using nested for loops to generate multiple instances of a table with details of projects; under which I wish to have a show/hide button that will give a short description of each project at a high level.

I am tring to manipulate code I found here: https://forums.digitalpoint.com/threads/javascript-to-show-hide-tables.1009918/

The following code produces a "Show/Hide" link that does not work on my page (see screenshot). Am I missing something?

FYI - "Separate" in the code below is an array containing unique project references to facilitate the separation of the tables per project. So where Separate contains 4 elements, there should be 4 projects, 4 tables, and so on.

Many Thanks, Karl

function showhide(id){ 
    if (document.getElementById){ 
            obj = document.getElementById(id); 
            if (obj.style.display == "none"){ 
            obj.style.display = ""; 
        } else { 
            obj.style.display = "none"; 
        } 
    } 
} 

for(i in Separate){
DescID[i] = "DescID"+i;}

var Table = "";

for(i in Separate){
Table += "<table  id='dashboard' summary='Project Dashboard'>";
Table += "<THEAD>";
Table += "<TR><TH scope='col' colspan=4><B>"+ Separate[i] +"</B></TH></TR>";
Table += "<TR><TH scope='col'>Task Names</TH><TH scope='col'>Task Summary</TH><TH scope='col'>RAG</TH><TH scope='col'>Timeline</TH></TR></THEAD>";
Table += "</THEAD>";
Table += "<TBODY>";

    for(j in Project){
    if(Project[j] == Separate[i]){
        Table += "<TR><TD title='" + Comments[j] + "'>"+ Task[j] +"</TD><TD>"+ Summary[j] +"</TD><TD><img src='/images/RAG/" + RAG[j] + "'></TD><TD>"+ DateType[j] +" "+ Status[j].substring(0,10) +"</TD></TR>";
            }
    }

Table += "</TBODY>";
Table += "</table>";
Table += "<a onclick ='javascript:ShowHide('" + DescID[i] + "')' href='javascript:;' >Show/Hide Project Description</a>";
Table += "<div class='mid' id='" + DescID[i] + "' style='DISPLAY: none' >Placeholder for Project Description</div>";
Table += "<BR>";
}

screenshot

Not sure if this is a typo, but you are looping through Separate twice, one inside the other. Also, how are you placing the descripton on the page? Are you getting any errors when you clic on the Show/Hide Project Description link? — Robbert, Mar 28 '13 at 15:58
Hi @Robbert, I do not see where I am looping through Separate twice within itself.... I have once before Table is defined, and once after. Yep, I get "Syntax Error", but that's it. Instead of "Placeholder for Project Description" above, I plan to have another array containing the descriptions that I will call. — Karl Major, Mar 28 '13 at 16:18
@KarlMajor what kind of Syntax Error? Looks like you are calling a function by a wrong name. — Artyom Neustroev, Mar 28 '13 at 16:20
@neustroev.ai Below is what I get; not very helpful really. I reviewed your point and change the function name and now I get both the Show/Hide link and the content but I cannot hide anything... Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.2; MS-RTC LM 8) Timestamp: Thu, 28 Mar 2013 16:23:39 UTC Message: Syntax error Line: 1 Char: 10 Code: 0 — Karl Major, Mar 28 '13 at 16:28
@KarlMajor Can you open your website in Chrome and check, if there is an error ? — Artyom Neustroev, Mar 28 '13 at 16:39
I think Javascript function names are case-sensitive. Your function is called `showhide` but you are trying to call `ShowHide`. That may be causing the problem. — Elias Zamaria, Mar 28 '13 at 18:20
Also, having multiple elements with the same id attribute can cause problems. See [this question](http://stackoverflow.com/questions/7505350/why-is-it-a-bad-thing-to-have-multiple-html-elements-with-the-same-id-attribute). — Elias Zamaria, Mar 28 '13 at 18:21

C.B. · Answer 1 · 2013-04-06T01:30:29.463

You're missing the fact that HTML tag "id"s (e.g., for your Projects' tables) should be unique, otherwise "getElementById" won't work. Now they're all set to "dashboard". At the very least you could add the index, and make them "dashboard1", "dashboard2", etc...

Also, IIRC, a better opposite for 'display = "none";' is 'display = "inline";', instead of 'display = "";'. Although this needs more testing on different browsers to select the best option.

Thirdly, your JavaScript call within the onclick events use single quotes BOTH for the attribute value definition (surrounding the JS call) and for the string parameter (the id to show/hide)... That's not valid syntax, and you need one of these two use-cases to be double-quotes.

And the other main problem your code has is as mikez302 already spotted: "Javascript function names are case-sensitive. Your function is called showhide but you are trying to call ShowHide." Correcting these two issues (the quotes and the function name) will allow the code to work, i've just tested it. :)

Show/Hide Multiple DIVs in a variable

1 Answers1