CODEWITHSUNDEEP
javascriptangularjs
Pham Minh Tan
Pham Minh Tan

Reputation: 2096

Show/Hide/Toggle in AngularJS

I have nav bar with 2 buttons.

<div class="navbar-header">
    <div class="navbar-header">
         <div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile"><i class="fa fa-bars fa-3x"></i></div>
         <div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent"><i class="fa fa-ellipsis-v fa-3x"></i></div>
    </div>
</div>

When click div#toggle-menu it makes div#sidebar-mobile-wrapper is shown.

<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile"></div>

and when i click div#toggle-function it makes div#right-content-mobile is shown.

<div class="container-fluid right-content-mobile" ng-show="isShowRightContent"></div>

It all worked. But now i want, at a time only one div can be shown. So when i click #toggle-menu, if div#right-content-mobile is visible, it will be hide and sidebar-mobile-wrapper and otherwise.

Upvotes: 0

Views: 4592

Answers (3)

Jju
Jju

Reputation: 135

It's really good idea to incapsulate work with model values into a controller, that give You ability to change behaviour easy.

You can use a follow approach:

<div class="navbar-header">
  <div id="toggle-menu" ng-click="contentToggle('mobile')">Toggle mobile</div>
  <div id="toggle-function" ng-click="contentToggle('right')">Toggle right</div>
</div>

<div ng-show="isContentToggled('mobile')">
  <strong>Mobile content</strong>
</div>
<div ng-show="isContentToggled('right')">
 <strong> Right content</strong>
</div>

with the controller methods

$scope.content = undefined;
$scope.contentToggle = function(name){
  if ($scope.isContentToggled(name)){
    $scope.content = undefined;
  } else {
    $scope.content = name;
  }
}

$scope.isContentToggled = function (name){
  return $scope.content == name;
}

You can see an example at http://plnkr.co/edit/WoqtP8ZpvPh2r94ITQvf?p=preview

Upvotes: 0

saygon91
saygon91

Reputation: 116

Look for this. I hope it exactly what you need. Actually you need use ready solutions for this task(such as tabs,accordion,panels).

  <div class="navbar-header">
      <div class="navbar-header">
           <div id="toggle-menu" ng-click="isShowSideBarMobile = !isShowSideBarMobile;isShowRightContent = false;"><i class="fa fa-bars fa-3x"></i><button>isShowSideBarMobile</button></div>
           <div id="toggle-function" ng-click="isShowRightContent = !isShowRightContent;isShowSideBarMobile = false;"><i class="fa fa-ellipsis-v fa-3x"></i><button>isShowRightContent</button></div>
      </div>
  </div>
  <div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="isShowSideBarMobile && !isShowRightContent">sidebar-mobile-wrapper</div>
  <div id="right-content-mobile" class="container-fluid" ng-show="isShowRightContent && !isShowSideBarMobile">right-content-mobile</div>

Upvotes: 0

Max Koretskyi
Max Koretskyi

Reputation: 105517

Use only mobileMenuCollapsed variable: 

<div class="navbar-header">
        <div class="navbar-header">
             <div id="toggle-menu" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-bars fa-3x"></i></div>
             <div id="toggle-function" ng-click="mobileMenuCollapsed = !mobileMenuCollapsed"><i class="fa fa-ellipsis-v fa-3x"></i></div>
        </div>
    </div>

<div id="sidebar-mobile-wrapper" class="container-fluid" ng-show="!mobileMenuCollapsed"></div>
<div class="container-fluid right-content-mobile" ng-show="mobileMenuCollapsed"></div>

Upvotes: 0

Related Questions