如何在父div中隐藏/显示div

Question

I am working on a site and I need to have a basic show hide functionality for part of it where, when the user clicks on a subject header, it displays an unordered list below the subject header, and then when they click on the subject header again, it will hide the content again.

I have done this in the past, but when I tried applying my code to the site I am working on, it does not work....the hidden content does not display.

Currently, I am using javascript, but if there is a better way, perhaps with pure CSS, that would be fine with me too.

Here is the code I am trying right now (I have a feeling that it isn't working becasue of a parent/child div situation, but I wasn't sure and so I was hoping someone could lead me in the right direction:

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="toggle-buttons">
    <div class="web-develop-toggle">
        <a href="#" onClick="toggle-web-develop('web-develop-content',this)">
            <img src="images/subCtxHeader3-c.png" class="img-responsive" border="0">
        </a>
    </div>
    <div class="web-develop-content" style="display: none;">
        <div class="web-develop-body">
            <ul class="svc-list">
            <li class="svc-bullet"><span class="svc-list">Option 1</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 2</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 3</span></li>
            <li class="svc-bullet"><span class="svc-list">Option 4</span></li>
        </ul>
        </div>
    </div>
</div>
</div>
</div>
</div>

And here is the javascript that I am using currently, which has worked for me in the past, ironically enough:

<script type="text/javascript">

function toggle-web-develop(id, link) {

    var e = document.getElementById(id);

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

</script>

Any and all help would greatly be welcomes as I have been stuck on this for a full day. Thanks in advance!

-- Dan

Answer 1

You cannot use - in a function name. Try something like toggleWebDevelop()

You are trying to find web-develop-content by id, but you are using it as a class in your HTML

<div class="web-develop-content" style="display: none;">

Should be...

<div id="web-develop-content" style="display: none;">

Also, I would use e.style.display = 'block'; instead of e.style.display = '';

DEMO