Solved

JS Query Collapsible menu and style

Posted on 2014-01-31
17
244 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Text color in a select 11 31
toggle content 12 39
Execute jQuery after Function 4 37
Bootstrap best practice - handling navigation menu at 770 ish width 6 50
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will learn how to dynamically set the form action using jQuery.

738 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