Solved

JS Query Collapsible menu and style

Posted on 2014-01-31
17
239 Views
Last Modified: 2014-02-03
I am using a JSQuery code for collapsible / expandible lists: http://jsfiddle.net/SacWm/80/ 

The lists are collapsing / expanding correctly but now I need to do a better layout. Right now the code the displaying all in a left aligned margin. I want the display to look like this. I would like the + indicating there are expansions (click to expand) and then the typical displays for the actual links. I have my style sheets set up and currently standard lists appear this way. How do I get the collapsible / expandible lists to display like this.

+      Documents
        •      Document 1
        •      Document 2
+      Reports
      +      Local
                •     Local 1
                •     Local 2
                •     Local 3
        +      State
               •     Ohio
               •     Pennsylvania
+     Links
       •     www.google.com
       •     www.bing.com
0
Comment
Question by:Malloy1446
  • 8
  • 8
17 Comments
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39824730
Us can use the .children() function for the jQuery, and set up a new class for list items that have a sub nav. I've set up an example here: http://jsfiddle.net/SacWm/105/
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39824757
You can add a class that will display a plus sign based on whether the li has any ul children

http://jsfiddle.net/SacWm/106/
0
 

Author Comment

by:Malloy1446
ID: 39824851
Kyle/Adrian:  I tried to copy your recommended code and the menus no longer collapse/expand.

I am saving the files as asp.

Codes attached
Kyle.txt
Adrian2.txt
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39824911
if you put the script above the html, the DOM is not yet available. You have to call the onload function:

<script>
$(function(){
// code...

})
</script>

Otherwise, place your script at the bottom of the page so that the DOM is available by the time your page reaches the function.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39824914
if you notice in the fiddle, the onload setting is selected. that's why the fiddles work.
0
 

Author Comment

by:Malloy1446
ID: 39824943
Kyle: this is new to me, sorry. I place the script at the bottom of the page and the collapse/expand is working. I for some reason am not getting the + sign for the expansion items.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39824953
please post your revised code
0
 

Author Comment

by:Malloy1446
ID: 39824973
New code
Kyle2.txt
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39824993
I see the plus sign. I'm also getting the bullets, but you can get rid of those by setting:

ul, li{
  list-style:none;
}

Open in new window


what browser are you looking in?
0
 

Author Comment

by:Malloy1446
ID: 39824997
IE9
0
 

Author Comment

by:Malloy1446
ID: 39825007
I do want bullets when there are no more sub-lists.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39825037
this works for me. You should use UTF-8 encoding unless you have very specific reason not to:

<!doctype html>



<head>
<meta charset="UTF-8" />
<title>Untitled 1</title>


<style>
ul{
    margin:3px;
    border:1px solid red;  
}
li{
    margin-left:10px;
}
li.category:before{
    content:"+";
    padding-left:5px;
}
li.item:before{
    content:"• ";
}
ul ul{
    display:none;   
}
ul li:hover>ul{
    /*display:block;   */
}
ul, li{
  list-style:none;
}

</style>


</head>

<body>

<ul>
    <li>
        level 2
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        level 2
        <ul>
            <li>
                level 3
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>
            
            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!--the following script needs to remain at the bottom of the code -->
<script>
$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

$("li").each(function(){
    that = $(this);
    if(that.children("ul").length > 0){
        that.addClass("category");
    }else{
        that.addClass("item");
    }
});

</script>



</body>

</html>

Open in new window

0
 

Author Comment

by:Malloy1446
ID: 39825064
I am getting the expand/collapse but with NO bullets or plus signs. I copied your code from above.

Saving file as .asp.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39825135
this screenshot is of the code I posted in IE9:

http://cl.ly/image/1z3X3x0R2W0G

you must be doing something different.
0
 

Author Comment

by:Malloy1446
ID: 39825618
Code works fine in Firefox. Still searching for the solution for IE9.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39825638
the code as i posted it works in ie9.

there may be other factors affecting your page. please post a link to your page.

(it's very important that the encoding is UTF8 and not what you had in the snippet you posted earlier)
0
 

Author Comment

by:Malloy1446
ID: 39829957
I found the solution to make the code work across all versions of IE. I added the following line:

<meta http-equiv="X-UA-Compatible" content="IE=10" >

Works great. Thanks for the help!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to dynamically set the form action using jQuery.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question