CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maz341
Maz341

Reputation: 2439

Click expand on html

I want to do Expand/collapse on click (See pic below).

When a person clicks on the PLUS(+) sign, it expands and the signs change itself to Minus(-) sign and when a person clicks on Minus Sign it Collapse and again changes to Plus Sign.

Here is the Image, enter image description here

Upvotes: 0

Views: 1175

Answers (3)

Dinesh undefined
Dinesh undefined

Reputation: 5546

I think you are looking for Tree view. If its you can achieve this using jquery plugin

jQuery-Folder-Tree-Plugin

Upvotes: 1

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20137

Your image says you want something like JSON Tree.

you can do this by using several Jquery plugins. here is the one - github link, Z-Tree

Upvotes: 0

Mμ.
Mμ.

Reputation: 8542

I found this jsfiddle with nice implementation of what you are looking for.

var data = [{
    "id": "1",
    "name": "Corporate Headquarters",
    "budget": "1230000",
    "location": "Las Vegas",
        "children": [{
        "id": "2",
        "name": "Finance Division",
        "budget": "423000",
        "location": "San Antonio",
            "children": [{
            "id": "3",
            "name": "Accounting Department",
            "budget": "113000",
            "location": "San Antonio"
        }, {
            "id": "4",
            "name": "Investment Department",
            "budget": "310000",
            "location": "San Antonio",
            children: [{
                "id": "5",
                "name": "Banking Office",
                "budget": "240000",
                "location": "San Antonio"
            }, {
                "id": "6",
                "name": "Bonds Office",
                "budget": "70000",
                "location": "San Antonio"
            }, ]
        }]
    }, {
        "id": "7",
        "name": "Operations Division",
        "budget": "600000",
        "location": "Miami",
            "children": [{
            "id": "8",
            "name": "Manufacturing Department",
            "budget": "300000",
            "location": "Miami"
        }, {
            "id": "9",
            "name": "Public Relations Department",
            "budget": "200000",
            "location": "Miami"
        }, {
            "id": "10",
            "name": "Sales Department",
            "budget": "100000",
            "location": "Miami"
        }]
    }, {
        "id": "11",
        "name": "Research Division",
        "budget": "200000",
        "location": "Boston"
    }]
}];

var source = {
    dataType: "json",
    dataFields: [{
        name: "name",
        type: "string"
    }, {
        name: "budget",
        type: "number"
    }, {
        name: "id",
        type: "number"
    }, {
        name: "children",
        type: "array"
    }, {
        name: "location",
        type: "string"
    }],
    hierarchy: {
        root: "children"
    },
    localData: data,
    id: "id"
};

var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {

    }
});
// create jqxTreeGrid.
$("#treeGrid").jqxTreeGrid({
    source: dataAdapter,
    altRows: true,
    width: 680,
    theme:'energyblue',
    checkboxes: true,
    ready: function () {
        $("#treeGrid").jqxTreeGrid('expandRow', '1');
        $("#treeGrid").jqxTreeGrid('expandRow', '2');
    },
    columns: [{
        text: "Name",
        align: "center",
        dataField: "name",
        width: 300
    }, {
        text: "Budget",
        cellsAlign: "center",
        align: "center",
        dataField: "budget",
        cellsFormat: "c2",
        width: 250
    }, {
        text: "Location",
        dataField: "location",
        cellsAlign: "center",
        align: "center"
    }]
});
$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    height: 30
});
$('#jqxbutton').click(function () {
    $("#treeGrid").jqxTreeGrid('checkRow',2);
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Check a row" />

Upvotes: 1

Related Questions