Solved

JS Query Collapsible menu and style

Posted on 2014-01-31
17
247 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

728 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