How to show and hide a simple
list with onclick?

Question

Considering the following paragraph and list:

<p id = "list1" onclick = "openList1()">List of Items</p>
<ol>
  <li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
  <li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
  <li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
  <li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
  <li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>

How can I show and hide this entire list with Javascript?

<script>
function openList1() {
...
}
</script>

I thank you for the attention!

Google "show and hide a div" and you'll see lots of ways. – Terry Jul 10 '13 at 01:37 — Terry, Jul 10 '13 at 01:37

score 6 · Accepted Answer · answered Jul 10 '13 at 01:39

You can give an id to the OL list.

<p id = "list1" onclick = "openList1()">List of Items</p>
<ol id="ollist">
  <li><a href = "/exampleFolder/file1.txt">List Item 1</a></li>
  <li><a href = "/exampleFolder/file2.txt">List Item 2</a></li>
  <li><a href = "/exampleFolder/file3.txt">List Item 3</a></li>
  <li><a href = "/exampleFolder/file4.txt">List Item 4</a></li>
  <li><a href = "/exampleFolder/file5.txt">List Item 5</a></li>
</ol>

And then in your javascript you can toggle it like this...

<script>
function openList1() {
    var list = document.getElementById("ollist");

    if (list.style.display == "none"){
        list.style.display = "block";
    }else{
        list.style.display = "none";
    }
}
</script>

score 2 · Answer 2 · answered Jul 10 '13 at 01:38

2

var myList = document.getElementsByTagName('ol');
myList[0].style.visibility = 'hidden'; // 'visible'

answered Jul 10 '13 at 01:38

DevlshOne

8,357
1
29
37

score 2 · Answer 3 · answered Jul 10 '13 at 01:39

2

<script>
function openList1() {
$("ol").toggle();
}
</script>

Can you use JQuery? If so, try the above

answered Jul 10 '13 at 01:39

TGH

38,769
12
102
135

score 1 · Answer 4 · edited Jul 10 '13 at 01:55

1

var ol = document.getElementByTagName('ol');
 ol.style.display='none';

edited Jul 10 '13 at 01:55

Amit

15,217
8
46
68

answered Jul 10 '13 at 01:38

LanceHub

590
1
4
5

score 1 · Answer 5 · answered Jul 10 '13 at 01:39

First you can modify your list:

<ol id="list" style="display: none;">

You can write a function to show:

function showStuff(id) {
    document.getElementById(id).style.display = 'block';
}
// call function to show your list
showStuff("list");

To hide your element:

function hideStuff(id) {
    document.getElementById(id).style.display = 'none';
}
// call function to hide your list
hideStuff("list");

How to show and hide a simple
list with onclick?

5 Answers5

Linked

How to show and hide a simple list with onclick?

5 Answers5

Linked

How to show and hide a simple
list with onclick?