Question

I have some problems showing and hiding certain elements of a nested list. My HTML code is as follows:

<ul class="unstyled">
        <li onClick="foo();">INFO 1234 - Some Code Subject
        <ul>
            <li class="sem_hide">Semester 1
            <li class="sem_hide">Semester 2
            <li class="sem_hide">Semester 3
        </ul>
        <li onClick="foo();">INFO 4567 - Some DB Subject
        <ul>
            <li class="sem_hide">Semester 1
            <li class="sem_hide">Semester 2
            <li class="sem_hide">Semester 3
        </ul>
</ul>

My JavaScript looks like this:

<script>
        function foo()
        {
            if($('li .sem_hide').is(":visible"))
            {
                $('li .sem_hide').hide();
            }
            else 
            {
                $('li .sem_hide').show();
            }
        }
</script>
<script type="text/javascript" src="js/jquery.js"></script>

And my CSS like this:

<style>
    body{
        width: 600px;
        margin-left: auto;
        margin-right: auto;
        background: #efefef;
    }

    li .sem_hide{
        display: none;
    }

</style>

I’m new to web development and am currently facing a problem which is that when I click on a subject, all the semesters for all the subjects are shown but what I want is the semesters for just the clicked subject to be shown. Is there a workaround to get what I want?

Thanks.

Answer 1

Add jQuery before you use it, pass this in foo to point source object.

<script>
        function foo(obj)
        {
            if($('.sem_hide', obj).is(":visible"))
            {
                $('sem_hide', obj).hide();
            }
            else 
            {
                $('.sem_hide', obj).show();
            }
        }
</script>
<li onClick="foo(this);">