Member Avatar for Violet_82

Hi there, I am working on an accordion, I am more interested in the way it works, but I am having some problems. I worked on something similar sometime ago, and got some help in here, but I thought I will try to do it again on my own..and ehm, something went wrong.

There must be an error in the code somewhere but I am not sure what it is

as jquery I am using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>

Here's the code I came up with;
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>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 id = "accordion">
            <ul id = "main_list">
                <li><a href = "#" class = "header">Today</a>
                    <ul>
                        <li>apples</li>
                        <li>pears</li>
                        <li>banabas</li>
                    </ul>
                </li>
                <li><a href = "#" class = "header">Yesterday</a>
                    <ul>
                        <li>fish</li>
                        <li>pork</li>
                        <li>beef</li>
                    </ul>
                </li>
                <li><a href = "#" class = "header">Day before yesterday</a>
                    <ul>
                        <li>beans</li>
                        <li>peas</li>
                        <li>lettuce  </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS

#accordion
    {
        border:1px solid red;
        width:500px;
        height:500px;
        margin:0 auto;
    }

#main_list
    {
        border:3px solid blue;  
    }

ul#main_list, #main_list ul
    {
        list-style:none;
    }

#main_list li a
    {
        text-decoration:none;
        color:black;
        font-size:150%;
    }

#main_list li a:hover
    {
        background-color:red;
    }

#main_list > li > ul > li
    {
        display:none;
    }

JQUERY

$(document).ready(function(){
    $("ul#main_list a.header").click(function(){
        $(this).children("ul").slideToggle();

    });

});

Here's a preview: http://antobbo.webspace.virginmedia.com/various_tests/accordion/test.htm

I mean if I look at the script I can't find anything wrong with it: I select the link with a class of header within a list with an id of main_list, attach a click function to it and then using $(this).children("ul").slideToggle(); I refer to the nested list which should toggle...

Interestingly enough if rather than use an external javascript as I have done above, I use an inline script, firebug doesn't find any error anymore, but the script still doesn't work.
I have also tried other things, like this modified version of the script:

$(document).ready(function(){
$("ul#main_list a.header").click(function(){
$(this).children("ul").children("li").slideToggle();

});

});
  • 2 Contributors
  • 4 Replies
  • 86 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for blocblue

Your context is off.

You have a click action on a.header elements. When you're in the function for that click event, the context of $(this) changes to the a element, not the parent list.

The unordered list is therefore a sibling, not a child of the a element.

Try:

$(function() {
    $('ul#main_list a.header').click(function() {
        $(this).siblings('ul').children('li').slideToggle();
    });
});
Member Avatar for Violet_82

Hi blocblue, thanks for your post and code, it works. Now, the thing is I think I am a bit confused about this children/sibling business. In my html I have

<ul id = "main_list">
                <li><**a href = "#" class = "header">Today</a>
                    <ul>**
                        <li>apples</li>
                        <li>pears</li>
                        <li>banabas</li>
                    </ul>

In the script with this $('ul#main_list a.header') I am referring to the link which is child element of the list item. So you're saying that the bolded tags in the code <a href> and <ul> are siblings? I thought they were parent and child, hence my code.

On a separate note: let's take you're code. Here $(this).siblings("ul").children("li").slideToggle(); why can't I omit .children("li"), why .siblings("ul") isn't enough?

thanks

Member Avatar for blocblue

The <a> and <ul> elements are siblings because they're both children of the same <li> element.

If the <ul> element was wrapped within the <a> element, then it would be a parent / child releationship.

And with your final question, .siblings('ul') would be enough, but your CSS would need to be updated to #main_list > li > ul {display:none;}.

I just corrected the code you posted - that's all.

Member Avatar for Violet_82

blocblue, thank you very much for the explanation, and much appreciate your correction to the code, I was just curious as to why I had to use children('li') but now by reading what you said and looking at the css is clear, so thanks for that :-)

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.