Home Hide and display html elements
Post
Cancel

Hide and display html elements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body ng-app="myapp">
    <div class="container-fluid" ng-controller="myctrl">
        <ul class="nav nav-tabs" id="myTab" role="tablist" style="display:flex">
            <li class="nav-item" role="presentation" id="l1"></li>
            <li class="nav-item" role="presentation" id="l2"></li>
        </ul>

        <div class="tab-content" id="myTabContent" style="display:flex">
            <div class="tab-pane fade show active" id="pane1" role="tabpanel" aria-labelledby="tab1"></div>
            <div class="tab-pane fade" id="pane2" role="tabpanel" aria-labelledby="tab2"></div>
        </div>

        <div class="table-responsive" id="table1"></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
angular.module("myapp", []).controller("myctrl", ['$scope', '$http', function (scope, http) {
    scope.HideDisplayElements = function () {
        // hide the tabs
        document.getElementById("myTabContent").style.display = "none";   
        document.getElementById("myTab").style.display = "none";

        // hide table
        document.getElementById("table1").style.display = "flex";
    }
}

Reference

This post is licensed under CC BY 4.0 by the author.

Access a sharedv4 volume outside of a Portwrox cluster

AngularJS table creation for dynamic number of columns

Comments powered by Disqus.