making n level subcategories and categories and add search functionality

Gurpreet Singh Randhawa
Gurpreet Singh Randhawa used Ask the Experts™
on
using the following jquery fiddle

http://jsfiddle.net/uqgd07kp/3/

/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
        .click(function (event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
        .addClass('collapsed')
        .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
        .unbind('click')
        .click(function () {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
        .unbind('click')
        .click(function () {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready(function () {

    var myJSONCategories = {
        "categories": [{
            "ic_id": "100002",
            "ic_disp_val": "Campaigns",
            "ic_sub": 1,
            "ic_sub_categories": [{
                "ic_id": "100021",
                "ic_disp_val": "Campaigns sub categorist",
                "ic_sub": 1,
                "ic_sub_categories": [{
                    "ic_id": "100118",
                    "ic_disp_val": "camp 1",
                    "ic_sub": 0
                }, {
                    "ic_id": "100119",
                    "ic_disp_val": "camp 2",
                    "ic_sub": 0
                }, {
                    "ic_id": "100120",
                    "ic_disp_val": "camp 3",
                    "ic_sub": 0
                }]
            }]
        }, {
            "ic_id": "100002",
            "ic_disp_val": "Products",
            "ic_sub": 1,
            "ic_sub_categories": [{
                "ic_id": "100021",
                "ic_disp_val": "cxtest",
                "ic_sub": 1,
                "ic_sub_categories": [{
                    "ic_id": "100118",
                    "ic_disp_val": "camp 1",
                    "ic_sub": 0
                }, {
                    "ic_id": "100119",
                    "ic_disp_val": "camp 2",
                    "ic_sub": 0
                }, {
                    "ic_id": "100120",
                    "ic_disp_val": "camp 3",
                    "ic_sub": 0
                }]
            }]
        }, {
            "ic_id": "100002",
            "ic_disp_val": "Campaigns / Products",
            "ic_sub": 1,
            "ic_sub_categories": [{
                "ic_id": "100021",
                "ic_disp_val": "cxtest",
                "ic_sub": 1,
                "ic_sub_categories": [{
                    "ic_id": "100118",
                    "ic_disp_val": "camp 1",
                     "ic_sub": 1,
                    "ic_sub_categories": [{
                        "ic_id": "100118",
                        "ic_disp_val": "new added 1",
                        "ic_sub": 0
                }]
                }, {
                    "ic_id": "100119",
                    "ic_disp_val": "camp 2",
                    "ic_sub": 0
                }, {
                    "ic_id": "100120",
                    "ic_disp_val": "camp 3",
                    "ic_sub": 0
                }]
            }]
        }]
    };

    function addCategories(obj)
     {
        htmlBuilder = "";
        for (var i = 0; i < obj.length;i++)
        {
            htmlBuilder +='<li>'+obj[i].ic_disp_val; 

            if (obj[i].ic_sub==1)
            {
                htmlBuilder +='<ul>';
                htmlBuilder += addCategories(obj[i].ic_sub_categories);
                htmlBuilder +='</ul>';
            }
            htmlBuilder +='</li>';
        }

        return htmlBuilder;
     }


    $("#expList").html(addCategories(myJSONCategories.categories));
    prepareList();
});


/********************/

/* GENERAL SETTINGS */

/********************/
 body {
    background-color: #AAAAAA;
    font-size: 16px;
}
#menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.clear {
    clear: both;
}
/********************/

/* EXPANDABLE LIST  */

/********************/
 #listContainer {
    margin-top:15px;
}
#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}
/* Collapsed state for list element */
 #expList .collapsed {
    background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
 #expList .expanded {
    background-image: url(../img/expanded.png);
}
#expList {
    clear: both;
}
.listControl {
    margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222;
    font-weight:normal;
}

Open in new window


I was able to see the categories/subcategories, But it is missing a big piece here that is when i expand one parent if any other parent of category is already opened, it should hide that. i mean at one point, it should only one parent, currently it is is opening all the parents of the categories, also i want to add a search functionality, when i type something, it should make a search in the categories/subcategories and its children, if they are n level deep

I am open to using the bootstrap build in accordian panel, anything else, but that must have search functionality where i can search within the categories and nested subcategories
Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
so in conclusion there is not a solution for making an ajax control works in an update panel?
It's not a case of whether it works or not more than why would you want to do it that way.
what i am trying is, create a type of ul li, where i can list down all my categories/subcategories and its children's.

when i open one parent, it should close all other opened parents and its childrens.

trying to implement the search box too where i can search string and find the category or its children
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You could do something like this
    <ul>
      <li>Parent 1
        <ul>
          <li>Child 1 of 1</li>
          <li>Child 2 of 1</li>
          <li>Child 3 of 1</li>
        </ul>
      </li>
      <li>Parent 2
        <ul>
          <li>Child 1 of 2</li>
          <li>Child 2 of 2</li>
          <li>Child 3 of 2</li>
        </ul>
      </li>
      <li>Parent 3
        <ul>
          <li>Child 1 of 3</li>
          <li>Child 2 of 3</li>
          <li>Child 3 of 3</li>
        </ul>
      </li>
    </ul>

Open in new window

JQuery
<script>
$(function() {
  $('ul li').click(function() {
    $('ul ul').hide();
    $(this).find('ul').toggle();
  });
});
</script>

Open in new window

Working sample here
great, that scripts works very well but few exceptions,

i want to add a search to find inside the ul, li list and and i have a json string as above, how can i convert that json string to this functionality

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial