Solved

JS Query Collapsible menu and style

Posted on 2014-01-31
17
235 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now