How can I make a button that toggles the visibility of an unordered list?

June 14, 2022

Here is where my button is located:

<body>
<h3 class="paragraph">Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when <button type="button" onclick="show" id="btnID" class="javabutton">
        this link</button> is clicked. If the operation has been completed already, notify the user that this has already been done.</h3>

And here is the unordered list I want my button to display:

<ul class="javalist" id="javalist">
            <li>Matt Johnson</li>
            <li>Bart Paden</li>
            <li>Ryan Doss</li>
            <li>Jared Malcolm</li>
            <li>Jordan Heigle</li>
            <li>Tyler Viles</li>
        </ul>
</body>

How do I make the button toggle between hiding/showing the list?

>Solution :

I don’t know how you made show(), but you have to use brackets in the onclick attribute like this:

function show(){
  var list  = document.getElementById("javalist");
  if(list.style.display != "none") list.style.display = "none";
  else list.style.display = "block";
}

<body>
<h3 class="paragraph">Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when <button type="button" onclick="show()" id="btnID" class="javabutton" >
        this link</button> is clicked. If the operation has been completed already, notify the user that this has already been done.</h3>
<ul class="javalist" id="javalist" style="display: none;">
            <li>Matt Johnson</li>
            <li>Bart Paden</li>
            <li>Ryan Doss</li>
            <li>Jared Malcolm</li>
            <li>Jordan Heigle</li>
            <li>Tyler Viles</li>
        </ul>
</body>