Help needed with expandable collapsible tables

Question

Can anyone take a look and guess what I am doing wrong on this code? I'm very newb at this btw. I can only click and expand the "Fun Team". Code Link below.

https://code.sololearn.com/WHkcxJk75zys/#html

Answer 1

You've got many mistakes:

+ giving same id attribute to many elements ('showHide'), then trying to target each independently will fail (and commonly return always the first element matching id)
+ trying to access many elements at once in JS? (I doesn't fully understand what's your goal in your function: you are declaring many time the same variables with different values... obviously, only the last one will be usable ^^)
+ using 'align="left"' as attribute of the <table> element: 'align' attribute is deprecated in Html5, and will be attempted to be corrected by browsers, but maybe not as you are expecting (and almost probably not by same way for all browsers :P): actually, on my android tablet, it will be displayed as a 'float=left' element, and so will shift next content on side of it rather than below (no line break between them)...

To fix behaviour, change some Html and modify JS script:

<script>

function expandCollapse(i) {

var hideShowDiv = document.getElementById("showHide"+i);
var label = document.getElementById("expand"+i);

if (hideShowDiv.style.display == 'none') {
label.innerHTML = label.innerHTML.replace("[+]", "[-]");
hideShowDiv.style.display = 'block';
} else {
label.innerHTML = label.innerHTML.replace("[-]", "[+]");
hideShowDiv.style.display = 'none';

}
}
</script>

On Html:

+ rename 'expand' id by 'expand1'
+ rename each 'showHide' id by 'showHide1', 'showHide2' and 'showHide3'
+ change 'onclick' content to call expandCollapse() with new expected argument (ie: the index number, as string or number... expandCollapse(1), expandCollapse(2), expandCollapse(3))

And to fix display, from Html:

+ remove 'align=left' from your <table>s elements
+ add 'text-align:left;' to Css style declaration for their parent <td> (ie: <td style="text-align:left;"> -- even if inlined css is unadvised, but useful for testing/explaining purposes ;P)