JQuery toggle div inside the foreach loop

Question

I am using knockback.js.I have a list of values "projects"(value comes from the server). and the content of these values are displayed in the <div class="hiddendivcontent"> .

<ul data-bind="foreach: projects" class="list-group">

     <li class="list-group-item" data-bind="click: function(data,event){CommunityView.showContents($data.pkey(),$data.folder(), data, event);}">
          <span style="border:0px;" class="glyphicon glyphicon-plus pull-right" data-toggle="dropdown" ></span>
          <ul class="dropdown-menu labellistdropdown" role="menu" style="min-width:200px;">
              <li>..</li>
          </ul>
          <div  class="hiddendivcontent">
              <ul data-bind= "foreach : $root.community()" class="list-group">
                   <ul data-bind = "foreach :items">
                     <li> <span data-bind="text:cname"></span></li>
                   </ul>   
              </ul>
           </div>    
    </li>  

 </ul>

The "hiddendivcontent" gets the value when "CommunityView.showContents()" is clicked. In other words,"hiddendivcontent" should be displayed when the method is clicked otherwise it remains hidden. The following code is the Jquery code that i have used :

showContents : function(pk,rf,data,event){
            event.preventDefault();
            $('.hiddendivcontent').toggle(); 
    }

If I use this above code the value is populated in all the list items. I have tried many ways to toggle the div but nothing works. Can anyone please suggest me any ideas?

Thanks in advance

It would be really helpful, if you'd create a simple jsfiddle with the exact issue you have. — Ilya Luzyanin, Aug 11 '14 at 18:29
Another thing - in your `click` binding you pass arguments `$data.pkey(),$data.folder()`, but should be `data.pkey(),data.folder()`, because `$data` is undefined in context of anonymous function. — Ilya Luzyanin, Aug 11 '14 at 18:35
There is no problem in that. I have checked it with alert messages in js part. My problem is toggling the hiddendivcontent for each and every list item — Acjb, Aug 11 '14 at 18:40
You're right, I thought that won't work. But jsfiddle would still be nice. — Ilya Luzyanin, Aug 11 '14 at 18:48
But to do in jsfiddle i dnt know how to populate values for foreach:projects values. I m new to this. so i dnt know how to proceed in jsfiddle — Acjb, Aug 11 '14 at 18:51
Create some dummy object, cut all unnecessary properties and markup leaving only the part where the issue persists. Ideally this would be a small piece of code with exact issue you're experiencing. — Ilya Luzyanin, Aug 11 '14 at 18:56
In your code, can you add properties to `projects` before putting them on page? — Ilya Luzyanin, Aug 11 '14 at 19:16
I couldnt understand your question. The projects values are got from the server and displayed on the webpage — Acjb, Aug 11 '14 at 19:22

score 1 · Answer 1 · answered Aug 11 '14 at 19:34

Try using knockout visible binding. First, when receive your projects from server, add to each project isVisible observable:

$.get(..., function(projects){
    projects = $.map(projects, function(project) {
        project.isVisible = ko.observable(false);
        return project;
    });
    viewModel.projects = projects; // assign received projects to your view model
});

Now in your markup use visible binding as follows:

<div data-bind="visible: isVisible">
    <ul data-bind= "foreach : $root.community()" class="list-group">
        <ul data-bind = "foreach :items">
            <li> <span data-bind="text:cname"></span></li>
        </ul>   
    </ul>
</div>

Note that you don't need hiddendivcontent class anymore. Last thing, in your showContents do as follows:

showContents: function(name, id, data, event) {
    data.isVisible(!data.isVisible());
}

See demo. I hope that's what you needed.

Thanks for the answer. But I tried it another way and it worked. Here is my improved answer. http://jsfiddle.net/usezpkj2/4/ — Acjb, Aug 12 '14 at 13:38

score 0 · Answer 2 · answered Aug 12 '14 at 13:42

Here is my answer for my question.

I have added some bootstrap icons for the list. So when the user clicks on the bootstrap glyphicon the hidden ul(which is created dynamically everytime when a user clicks on it) should be shown.

$(".glyphicon ").click( function ( e ){ 
   e.preventDefault() // prevent default action - hash doesn't appear in url
    var target = $(e.target);
    if(target.hasClass("glyphicon-chevron-right")){
    $(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
    var $newList = $("<ul />");
        $newList.append("<ul class="+"hiddendivcontent"+">");
    for(var i = 1; i <=4; i++) {
        $newList.append("<li><span>" + "menu" + i + "</span></li>");
    }        
    $(this).closest("li").append($newList);
    }
    else if(target.hasClass("glyphicon-chevron-down")){
         $(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
        $(e.target).parent().find("ul").remove();
    }
} )

http://jsfiddle.net/usezpkj2/4/

JQuery toggle div inside the foreach loop

2 Answers2