I have the following situation, 4 buttons with different vehicle routes, when I click a button a class is added activeand it shows the content that belongs to that route and an additional bootstrap class is added to the contentcol-md-6 word . What is the problem? That when several route buttons are given to activate them, the content word has a different behavior than expected, it is expected that if there are active buttons, the content word remains with the bootstrap class and if there are no active buttons, it remains with the class bootstrap . I have the following code:
clickcol-md-6col-md-12
PS: view in full screen to see the behavior, what do you suggest?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Prueba</title>
<!-- CDN Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<style type="text/css">
.active {
background-color: red !important;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaBuses}" ng-click="toggleRutas('buses')">
Ruta buses
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaBicicletas}" ng-click="toggleRutas('bicicletas')">
Ruta de bicicletas
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaMotos}" ng-click="toggleRutas('motos')">
Ruta de Motos
</button>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" ng-class="{'active': showRutaCarros}" ng-click="toggleRutas('carros')">
Ruta de carros
</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div ng-if="showRutaBuses">
<h1>Rutas de buses</h1>
<ul>
<li>
<a href="">Bus 1</a>
</li>
<li>
<a href="">Bus 2</a>
</li>
<li>
<a href="">Bus 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaBicicletas">
<h1>Ruta de Bicicletas</h1>
<ul>
<li>
<a href="">Bicileta 1</a>
</li>
<li>
<a href="">Bicileta 2</a>
</li>
<li>
<a href="">Bicileta 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaMotos">
<h1>Ruta de Moto</h1>
<ul>
<li>
<a href="">Moto 1</a>
</li>
<li>
<a href="">Moto 2</a>
</li>
<li>
<a href="">Moto 3</a>
</li>
</ul>
</div>
<div ng-if="showRutaCarros">
<h1>Ruta de Carros</h1>
<ul>
<li>
<a href="">Carro 1</a>
</li>
<li>
<a href="">Carro 2</a>
</li>
<li>
<a href="">Carro 3</a>
</li>
</ul>
</div>
</div>
<div ng-class="{'col-md-6': partContent, 'col-md-12': !partContent }">
<h1 class="text-danger">Contenido</h1>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showRutaBuses = false;
$scope.showRutaBicicletas = false;
$scope.showRutaMotos = false;
$scope.showRutaCarros = false;
$scope.partContent = false;
$scope.toggleRutas = function(typeRuoute) {
if (typeRuoute == 'buses') {
$scope.showRutaBuses = !$scope.showRutaBuses;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'bicicletas') {
$scope.showRutaBicicletas = !$scope.showRutaBicicletas;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'motos') {
$scope.showRutaMotos = !$scope.showRutaMotos;
$scope.partContent = !$scope.partContent;
}
if (typeRuoute == 'carros') {
$scope.showRutaCarros = !$scope.showRutaCarros;
$scope.partContent = !$scope.partContent;
}
}
});
</script>
</body>
</html>
Your code does not work for you because when you click a button and change the value of
$scope.partContentyou are not taking into account whether the other buttons are active or not, so you must ask at each click if at least one of the 4 buttons is active and if so keep$scope.partContentastrue.