[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 259
  • Last Modified:

JS Query Collapsible menu and style

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
Malloy1446
Asked:
Malloy1446
  • 8
  • 8
1 Solution
 
Adrian CrabtreeCommented:
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
 
Kyle HamiltonData ScientistCommented:
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
 
Malloy1446Author Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Kyle HamiltonData ScientistCommented:
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
 
Kyle HamiltonData ScientistCommented:
if you notice in the fiddle, the onload setting is selected. that's why the fiddles work.
0
 
Malloy1446Author Commented:
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
 
Kyle HamiltonData ScientistCommented:
please post your revised code
0
 
Malloy1446Author Commented:
New code
Kyle2.txt
0
 
Kyle HamiltonData ScientistCommented:
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
 
Malloy1446Author Commented:
IE9
0
 
Malloy1446Author Commented:
I do want bullets when there are no more sub-lists.
0
 
Kyle HamiltonData ScientistCommented:
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
 
Malloy1446Author Commented:
I am getting the expand/collapse but with NO bullets or plus signs. I copied your code from above.

Saving file as .asp.
0
 
Kyle HamiltonData ScientistCommented:
this screenshot is of the code I posted in IE9:

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

you must be doing something different.
0
 
Malloy1446Author Commented:
Code works fine in Firefox. Still searching for the solution for IE9.
0
 
Kyle HamiltonData ScientistCommented:
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
 
Malloy1446Author Commented:
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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now