Jquery -remembering visible -sidedown issue

JavaScript
1

I have following code

jquery


$('#menucoloups > li > ul')
        .hide()
        .click(function(e) {
        e.stopPropagation();
        });
        $('#menucoloups > li').toggle(function() {
        $(this).find('ul').slideDown();
        }, function() {
        $(this).find('ul').slideUp();
        });

HTML


			
  
<ul id="menucoloups">
    
<li><a href="#">student_name1</a>

<ul >
 <li><a href="show_act?catid=11&stuid=1">activity11</a></li>
 <li><a href="show_act?catid=20&stuid=21">activity21</a></li>
</ul>

</li>
    
<li><a href="#">student_name2</a>

<ul >
 <li><a href="show_act?catid=1&stuid=2">activity1</a></li>
 <li><a href="show_act?catid=20&stuid=2">activity20</a></li>
</ul>

</li>

slideup and down working perfectly.
However, if I click activity21(for example) it call show_act and hide all the menus and show student_name1&2. I understand that
it is because it initially hide the menu when it load the page.


.hide()
        .click(function(e) {

What I want is to slidedown the corresponding activity if clicked.

If someone click activity21,
it will show
<li><a href=“#”>student_name1</a>

[COLOR=“DarkGreen”]<ul >
<li><a href=“show_act?catid=11&stuid=1”>activity11</a></li>
<li><a href=“show_act?catid=20&stuid=21”>activity21</a></li>
</ul>

</li>[/COLOR]
and
hide li under student_name2.
<ul >
<li><a href=“show_act?catid=1&stuid=2”>activity1</a></li>
<li><a href=“show_act?catid=20&stuid=2”>activity20</a></li>
</ul>

Hope it is clear!. Any help appreciated.
Thanks.

2

Not sure if I am understanding the effect you are after.

  1. At load all the sublists are hidden

  2. When a list item is click if its sublist is NOT being shown then any shown sublist should be hidden and the sublist of the item clicked shown.

  3. When a list item is click if its sublist is being shown then the sublist is hidden.

This can be achieved by using the click event and using a class to flag the current sublist.

<html>
<head>
<script type="text/javascript" src="/akstonbridge/scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
		// hide all the sublists
		$('#menucoloups > li > ul').hide();
		// if an element in a sublist is clicked don't propagate it
		$('#menucoloups > li > ul > li').click(function (evt) {
						evt.stopPropagation();
					});
		// an list item is clicked
		$('#menucoloups li').click(function(evt) {
								// if this is the one that is open then close it
								if ($(this).hasClass("slid")) {
									$(this).slideUp();
									$(this).removeClass("slid");
								} else {
								// otherwise close any that are open and open this one
									$(".slid").slideUp();
									$(".slid").removeClass("slid");
									$(this).find('ul').addClass("slid").slideDown();
								}
								evt.preventDefault();
						});
});
</script>
</head>
<body>
<ul id="menucoloups">

<li><a href="#">student_name1</a>

<ul >
 <li><a href="show_act?catid=11&stuid=1">activity11</a></li>
 <li><a href="show_act?catid=20&stuid=21">activity12</a></li>
</ul>

</li>

<li><a href="#">student_name2</a>

<ul >
 <li><a href="show_act?catid=1&stuid=2">activity21</a></li>
 <li><a href="show_act?catid=20&stuid=2">activity22</a></li>
</ul>

</li>
<li><a href="#">student_name3</a>

<ul >
 <li><a href="show_act?catid=1&stuid=2">activity31</a></li>
 <li><a href="show_act?catid=20&stuid=2">activity32</a></li>
</ul>

</li>
</body>
3

Thanks for reply. What I want is - nested ul/li list, keep expanded after reload of page.
So I use cookie to hold the li value and display that .
I am using cookie plugin
http://plugins.jquery.com/files/jquery.cookie.js.txt

But it is not working


    $('#menucoloupsmore > li > ul').hide()
      
  
        .click(function(e) {
        e.stopPropagation();
        });
        $("#menucoloupsmore >li>ul>li").click(function(){
     var leftcol= $(this).find('ul');
     leftcol.slideDown(); 
       $.cookie('cstate', 'expanded');
       $.cookie('expanval',leftcol);
     });
     
       var getcokival=$.cookie('expanval');
       var getcokilval=$.cookie('cstate');
     if(getcokilval=='expanded') getcokival.slideDown();    
       
       
        $('#menucoloupsmore > li').toggle(function() {
        
        $(this).find('ul').slideDown();
        }, function() {
        $(this).find('ul').slideUp();
        });

Hope it is clear.

4

var leftcol= $(this).find(‘ul’);
leftcol.slideDown();
$.cookie(‘cstate’, ‘expanded’);
$.cookie(‘expanval’,leftcol);

What you are trying to do is store a jquery object, leftcol, in a cookie. You can only store a string. The better approach is to give get entry a unique id and store that

$.cookie(‘expanval’,leftcol.prop(“id”);

and to expand it

if(getcokilval==‘expanded’) $(getcokival).slideDown();