making n level subcategories and categories and add search functionality

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
LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
Gurpreet Singh RandhawaCEOAuthor Commented:
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
Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.