Expand/Collapse with + and -

Question

Hey I am looking to create an expandable/collapse div, I have it working fine with the following code which works fine but the first click doesnt seem to do anything.

<script type="text/javascript">
    function showme(id, linkid) {
        var divid = document.getElementById(id);
        var toggleLink = document.getElementById(linkid);
        if (divid.style.display == 'block') {
            toggleLink.innerHTML = 'Top five loves +';
            divid.style.display = 'none';        }
        else {
            toggleLink.innerHTML = 'Top five loves -';
            divid.style.display = 'block';
        }
    }
</script>

<a id="toggler" onclick="showme('loves', this.id);" href="#">Top five loves</a>
<div id="loves">
<ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
        <li>Fifth item</li>
</ol>
</div>

Thanks:)

Answer 1

If you just want to show/hide, why dont you make one element to show and one for hiding?

<script type="text/javascript">
    function showTop5(){
        document.getElementById("top5opener").style.display = "none";
        document.getElementById("top5").style.display = "block";
    }
    function hideTop5(){
        document.getElementById("top5").style.display = "none";
        document.getElementById("top5opener").style.display = "block";
    }
</script>
<a id="top5opener" href="javascript:showTop5();">Show Top 5</a>
<div id="top5" style="display:none">
    <a href="javascript:hideTop5();">Hide Top 5</a>
    <div class="yourElements">
        <ol>
            ...
        </ol>
    </div>
</div>

Your buttons/links just neet a little bit styling to look like you want

btw.: you can/should use some framework like jQuery:) so your javascript would be smaller and easier to write

Answer 2

Just use another toggle function (or edit the one you have) to toggle between a + and a - . Use a paragraph element (or similar) to hold the + and - .