Show hide links using angular js or JS on click

0
votes

On click of "Show all" I want to show all elements, On click of link "1st half" , I want to show "abc" "def" and "ghi". ON click of 2nd link "2nd half", I want to show "jkl", "mno" and "pqr". Again on click of link "show all ", I want to show everything. "abc" , "def", "ghi", "jkl", "mno", "pqr".

There are some similar questions which I found and tried to implement that. But I am not able to display again the hidden element.

Here are the sample of code:

When I click "Show first half", in JS I am doing this:

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'none';
document.getElementById("mno").style.display = 'none';
document.getElementById("pqr").style.display = 'none';

Again when I click "Show All", I am doing this:

document.getElementById("abc").style.display = 'visible';
document.getElementById("def").style.display = 'visible';
document.getElementById("ghi").style.display = 'visible';
document.getElementById("jkl").style.display = 'visible';
document.getElementById("mno").style.display = 'visible';
document.getElementById("pqr").style.display = 'visible';

But this is not able to display the hidden element again.

Please let me know if you need any further information.

Thanks.

2
javascriptjqueryhtmlangularjs
Are you comfortable using ng-model instend of using document.getElementById("def").style.display ? There are some directives specifically providerd by angularjs to show and hide elements. - nextt1
My application is in angular only.. but I am new to this so.. May be I don't know . My problem is solved but if you can give me any link for this it will be very helpful for me. I will also try to learn more about such angular directive. - undefined
ng-hide and ng-show. Should I write an example? - nextt1
yup use ng-show with scope flag. That will make more sense if you are using angular. - dishwasherWithProgrammingSkill
@JK_Jha please check my answer below to achieve the same goal the angular way. - dishwasherWithProgrammingSkill

2 Answers

2
votes

CSS display property has no value visible. You should use block instead of visible to show hidden element like following.

document.getElementById("abc").style.display = 'block';
document.getElementById("def").style.display = 'block';
document.getElementById("ghi").style.display = 'block';
document.getElementById("jkl").style.display = 'block';
document.getElementById("mno").style.display = 'block';
document.getElementById("pqr").style.display = 'block';
1
votes

Try avoiding use of elements for for task like these. You can achieve it by using ng-show or ng-if with the flags that you set in the scope variables.

First create the scope variables in the controller.

angular.module('sample', []);
angular.module('sample').controller('sampleCtrl', ['$scope',function($scope) {
  $scope.displayAll = true;
  $scope.displayOne = true;
  $scope.displayTwo = true;

  $scope.toggleDisplayAll = function(){
       $scope.displayAll = true;
       $scope.displayOne = $scope.displayAll;
       $scope.displayTwo = $scope.displayAll;
  };
  $scope.toggleDisplayOne = function(){
     $scope.displayOne = true;
     $scope.displayTwo = false;
  };
  $scope.toggleDisplayTwo = function(){
     $scope.displayTwo = true;
     $scope.displayOne = false;
  };

}]);

Now integrate those components into your html file.

    <body ng-app="sample">
     <div ng-controller="sampleCtrl">
       <button ng-click='toggleDisplayAll()'>Toggle All Display</button>
        <button ng-click='toggleDisplayOne()'>Toggle First Display</button>
        <button ng-click='toggleDisplayTwo()'>Toggle Second Display</button>
                    <nav class="navbar navbar-default">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" ><strong>Go quickly to: </strong></a>
                                </div>


                                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul id="test1" class="nav navbar-nav">
                                        <li id="all_sep_branch" class="active"><a href="#" ng-click="load_data_for_branch('all_branch')">All branches </a></li>

                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">abc </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">def </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">ghi </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">jkl </a></li>
                                        <li ng-show='displayOne'><a href="#" ng-click="load_data_for_branch()">mno </a></li>



                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">pqr </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">stu </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">vwln </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsdfs </a></li>
                                        <li ng-show='displayTwo'><a href="#" ng-click="load_data_for_branch()">fsddf</a></li>

                                    </ul>
                                </div>

 </div>  
  </body>

Also here is the working example

EDIT: I have updated the plunker and answer to solve your css issue.

EXPLAINATION ON WHY CSS WAS BREAKING: It was because you were using <span> tags between the <li> tags. That will break the parent child relation between the <ul> and <li> tags. Also you were using the $scope.displayOne and $scope.displayTwo as functions when they are just scope variables.