Hiding and showing divs with Javascript without multiple functions

Question

How do I hide a child div of an LI without retyping a function for each set? I am planning to repeat the current html many times. Current Javascript:

function $(id){
    return document.getElementById(id);
}
function year2014(){
    if ($('2014entries').style.display == 'none'){
        $('2014entries').style.display = 'block';
    }
    else {
        $('2014entries').style.display = 'none';
    }
}
function year2013(){
    if ($('2013entries').style.display == 'none'){
        $('2013entries').style.display = 'block';
    }
    else {
        $('2013entries').style.display = 'none';
    }
}

Partial HTML:

<ul>
<li id="2014" onclick="year2014()">2014</li>
    <div id="2014entries">
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </div>
<li id="2013" onclick="year2013()">2013</li>
    <div id="2013entries">
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </div>
</ul>

Can you change the markup?

Evan Trimboli
– Evan Trimboli

2014-04-21 02:31:51 +00:00
Commented Apr 21, 2014 at 2:31 — Evan Trimboli
– Evan Trimboli, Commented Apr 21, 2014 at 2:31

Dalorzo · Accepted Answer · 2014-04-21 02:37:49Z

1

Why you don't try something like:

function year(yearValue){
    if ($(yearValue+'entries').style.display == 'none'){
        $(yearValue+'entries').style.display = 'block';
    }
    else {
        $(yearValue + 'entries').style.display = 'none';
    }
}

answered Apr 21, 2014 at 2:37

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hiding and showing divs with Javascript without multiple functions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related