Member Avatar for Violet_82

Hi peeps, I wonder if you can help me at all. I am recreating a simple design, just doing some testing really, and what I am trying to achieve is to hide and show the navigation on the left side, here's the website: http://antobbo.webspace.virginmedia.com/various_tests/worktest/test.htm
So ideally when i click on section one the nested bullet list come up and so on.
Problem is, it's not working and I am a bit unseure as to why.
Here's the code.
HTML:

...
    <head>
        <title>This is a test</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type = "text/javascript" src = "script.js"></script>
    </head>
    <body>

            <div class = "wrapper">

                <div class = "navigation">

                    <ul class = "nav_bullet">
                        <li><a href = "#">Section one</a>
                            <ul class = "nested hidden">
                                <li>Link1</li>
                                <li>Link2</li>
                                <li>Link3</li>
                            </ul><!-- end of nested -->

                        </li>
                        <li><a href = "#">Section two</a>
                            <ul class = "nested hidden">
                                <li>Link1</li>
                                <li>Link2</li>
                                <li>Link3</li>
                            </ul><!-- end of nested -->
                        </li>
                        <li><a href = "#">Section three</a>
                            <ul class = "nested hidden">
                                <li>Link1</li>
                                <li>Link2</li>
                                <li>Link3</li>
                            </ul><!-- end of nested -->
                        </li>
                        <li><a href = "#">Section four</a>
                            <ul class = "nested hidden">
                                <li>Link1</li>
                                <li>Link2</li>
                                <li>Link3</li>
                            </ul><!-- end of nested -->
                        </li>
                    </ul>

                </div><!-- end of navigation -->

    ...

Here's the relevant css:

...
.navigation
    {
        border: 1px solid blue;
        width:19%;
        float:left;
        margin-top:70px;
    }

.clearing
    {
        clear:both;
    }

.nav_bullet li
    {
        list-style:square;
    }
.nested li
    {
        list-style:none;
    }

.hidden
    {
        display:none;   
    }

.visible
    {
        display:block;
    }
...

and finally the script:

$(document).ready(function(){
    $(".nav_bullet li").click(function(){
        $(this).removeClass("hidden").addClass("visible");  
    )};
)};

Firebug is returning this error:
syntax error

script.js (line 4)

But to be honest I can't spot any syntax error, any idea please?
thanks

Edited by Violet_82
  • 2 Contributors
  • 5 Replies
  • 130 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Violet, lines 4 and 5 - round and curly brackets are in the wrong order.

Member Avatar for Violet_82

oh no, sorry that was very very slack of me, apologies.
I have amended that but it still doesn't work (although I don't get any error anymore).
I looked at the code again and changed the script slightly. In the current script I say $(".nav_bullet li").click(function(){... but I am trying to target a list which is nested in the one that has a class of nav_bullet so I have changed that to

    $(document).ready(function(){
        $(".nav_bullet li ul").click(function(){
            $(this).removeClass("hidden").addClass("visible");  
        });
    });

but still nothing happens to my list items when I click on them. Am I missing something in the script? If I analyze it it seems to be making sense because in the selector I am targeting the one in bold:

        <ul class = "nav_bullet">
                            <li><a href = "#">Section one</a>
                                <ul **class** = "nested **hidden**">
                                    <li>Link1</li>
                                    ...

and then using the keyword "this" so that the script works on the selected nested list whose parent I clicked on...well at least this is the idea...

Member Avatar for Airshow

Violet, yes that's what you are targeting but it doesn't seem logical to me.

Wereas you can click on somedthing to hide it, you can't then click on that same something to show it again. Why not? Because when it is hidden it is not availabile to be clicked on!

In order to show something that's currently hidden, the click handler must be attached to something else - something that remains visible.

Member Avatar for Violet_82

Airshow, what you say makes a lot of sense. So I have changed the script to target the right elements:

$(document).ready(function(){
    $(".nav_bullet li").click(function(){
        $(".nav_bullet li ul").removeClass("hidden").addClass("visible");   
    });
});

Now, that works to an extent. When the list item in the list with nav_bullet is clicked on the nested lists have their hidden class removed and get a class visible which shows the element. The thing is that the above code brings makes appear all the nested lists whereas I need only the nested list whose parent list item has been clicked on.

I have 4 sublists so I need a way to say if I click on the first list show only its child list and not them all.
I have looked at filters but nothing seems to be the one for me simply because realistically I can click on any of the visible list item, in any order and I need to bring up just the child...How should I proceed?

Member Avatar for Airshow

Violet,

See demo here

Sorry I haven't got time to explain in full but there are some comments in the demo.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.