asked on

Expand Collapse left navigation ul tag using jQuery

I'm trying to find a jquery function or plugin that allows for a left navigation to enable expand/collapse using a plus/minus sign. The html will be aq bunch of unorderedlists. If you are oin a particular level and that page is displayed, the class becomes selected and each level has a different background color. Does anyone know how to implement this or see an example? I've searched the web for days and found some examples but none fit what I'm trying to do.

I prefer to use the 1.3.2 framework if possible.

expand calls minus sign
selected updates bg color
 
<ul id="left-nav">
<li class="expand selected"><a href="">Test</a>
<ul><li>test 2</li></ul></li></ul>

Open in new window

Jagadeesh M

I have done something similar with the help of this site in the past using simple javascript -

Let me see if I can create one using jQuery!

Ref - https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q__24809365.html

<html>
<head>
   <title></title>
   <script type="text/javascript">
      function onLoadFunction()
      {
         var a;
         for (var i = 0; (a = document.getElementsByTagName("A")[i]); ++i)
         {
            if (a.name == "m")
            {
               a.onclick = function()
               {
                  onLoadFunction(); // this resets everything
                  var cur = this;
                  while (cur)
                  {
                     if (cur.nextSibling && cur.nextSibling.style)
                     {
                        cur.nextSibling.style.display = "block";
                     }
                     if (!cur.parentNode || !cur.parentNode.parentNode)
                     {
                        break;
                     };
                     cur = cur.parentNode.parentNode.previousSibling;
                  }
               }
               if (a.nextSibling && a.nextSibling.style)
               {
                  a.nextSibling.style.display = "none";
               }
            }
         }
      }
   </script>
</head>
 
<body onload="onLoadFunction()">
 
<ul>
   <li><a name="m" href="#">Degreee Programs</a>
   <li><a name="m" href="#">Undergraduate Admission</a><ul>
      <li><a name="m" href="#">Prospective Students</a></li>
      <li><a name="m" href="#">Campus Visits</a><ul>
         <li><a name="m" href="#">Visit 1</a></li>
         <li><a name="m" href="#">Visit 2</a></li>
         <li><a name="m" href="#">Visit 3</a></li>
      </ul></li>
      <li><a name="m" href="#">Information Requests</a></li>
      <li><a name="m" href="#">Apply for Admission</a></li>
   </ul></li>
   <li><a name="m" href="#">Graduate Admission</a><ul>
      <li><a name="m" href="#">Prospective Students</a></li>
      <li><a name="m" href="#">Campus Visits</a><ul>
         <li><a name="m" href="#">Visit 1</a></li>
         <li><a name="m" href="#">Visit 2</a></li>
         <li><a name="m" href="#">Visit 3</a></li>
      </ul></li>
      <li><a name="m" href="#">Information Requests</a></li>
      <li><a name="m" href="#">Apply for Admission</a></li>
   </ul></li>
</ul>
</body></html>

Open in new window

ASKER CERTIFIED SOLUTION

Jagadeesh M

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sumesh_kashish

Hope the following code helps
******************************************************************************************

<html>
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
      $("#thirdpane li.menu_head").mouseover(function()
{
       $(this).css({backgroundImage:"url(down.png)"}).next("ul.menu_body").slideDown(500).siblings("ul.menu_body").slideUp("slow");
      });
});
</script>
<style type="text/css">
body {
      margin: 10px auto;
      font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
      width: 150px;
      list-style-type:none;
}
.menu_head {
      padding: 5px 10px;
      cursor: pointer;
      position: relative;
      margin:1px;
font-weight:bold;
background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body
{
      display:none;
      list-style-type:none;
}
.menu_body li a{
      display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body li a:hover{
color: #000000;
text-decoration:underline;
}
</style>
</head>
<body>
<ul class="menu_list" id="thirdpane">
            <li class="menu_head">Header-1</li>
            <ul class="menu_body">
              <li><a href="#">Link-1</a></li>
<li> <a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
            </ul>
            <li class="menu_head">Header-2</li>
            <ul class="menu_body">
              <li><a href="#">Link-1</a></li>
<li> <a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
            </ul>
</ul>
</body>
</html>

asaworker

ASKER

This is exactly what I was looking for.

asaworker

ASKER

Ran into a small problem.. what if each level has to be an actual link.. the expand/collapse won't work because the href gets triggered first. Any ideas?

sumesh_kashish

then also it is possible just change the css and the html and it would work fine

asaworker

ASKER

I tried that with no luck.. How would you prpose using the example given to do that?