Expand All / Collapse All

Question

I have about 13 HTMLItems which looks like this:

html script 1

<HTMLItem><staticValue>
<input type="BUTTON" class="clsPromptButton" onClick="JavaScript:ShowHide(&quot;HomeTown&quot;)" value="Home Town or City" 
style="color:  #4e86c2;  font: 14px Ariel; font-weight:Bold; text-align:left;height:20px;border:0pt solid #FFFFFF">
</staticValue></HTMLItem>

html script 2

<span id = "HomeTown"> 

html script 3

</span> 

and they are all defined by this:

<script language="javascript">

function HideStartup()
{
    var p1 = document.getElementById("EmpOrg");
    var p2 = document.getElementById("CertType");
    var p3 = document.getElementById("PrevClients");
    var p4 = document.getElementById("LLCourse");
    var p5 = document.getElementById("ProfInt");
    var p6 = document.getElementById("ProfMem");
    var p7 = document.getElementById("ProfRef");
    var p8 = document.getElementById("ProjExp");
    var p9 = document.getElementById("Quali");
    var p10 = document.getElementById("SecExp");
    var p11 = document.getElementById("HomeTown");
    var p12 = document.getElementById("WorkAS");


    p1.style.display = 'none';
    p2.style.display = 'none';
    p3.style.display = 'none';
    p4.style.display = 'none';
    p5.style.display = 'none';
    p6.style.display = 'none';
    p7.style.display = 'none';
    p8.style.display = 'none';
    p9.style.display = 'none';
    p10.style.display = 'none';
    p11.style.display = 'none';
    p12.style.display = 'none'

}

HideStartup()

function ShowHide(prompt)
{
    var ps = document.getElementById(prompt);

    if (ps.style.display != 'none' )
    {   
        ps.style.display = 'none';
    }
    else
    {           ps.style.display = '';
                        }

}


</script> 

---> So they are all scripted to SHOW/HIDE sections one by one as I click on the heading names.... BUT I want a button, well 2 buttons, which acts as Expand All, and Collapse All to use, how to I do this?

Answer 1

If all of the Buttons have the clsPromptButton class. You could use the following code:

At the top of your Script tags put, window.toggleAll = 0; then put the following somewhere:

function toggleAll() {

var buttons = Array.prototype.slice.call(document.querySelectorAll('.clsPromptButton'));

    buttons.forEach(function (button) {
        // Swap each element between display 'none' and 'block'
        if (window.toggleAll === 0) {
            button.style.display = 'block';
        } else {
            button.style.display = 'none';
        }

        // Swap window.toggleAll between 0 and 1
        window.toggleAll = window.toggleAll === 0 ? 1 : 0;
    });
}

Then somewhere on your page, put a button which calls the toggleAll function.

I would however recommend looking into the Revealing Module pattern design pattern, so you can better encapsulate your code and not have your code in the global namespace. You might not need to worry about that at the moment though :)