Change word when I click

Question

Change word when I click

Navigation

#1 by (5 votes)

2

How can I hide the word volver and show it when the div that has the class collapse is opened and the word search is hidden, that is, when the div makes collapse , "this open " show the word return if it is not open that shows the word search, I have the following code

 <!DOCTYPE html> 
 <html ng-app="myApp"> 
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> 
<body>   
    <div ng-controller="myCtrl">
        <ul id="tab-list" class="nav nav-pills tab-menu tabs nav-search">
            <li>
                <a data-toggle="collapse" data-target="#rent-tab">Busqueda avanzada</a>
                <a data-toggle="collapse" data-target="#rent-tab">Volver</a>
            </li>
        </ul>

        <div id="rent-tab" class="collapse">
            <div class="row">
                <div class="col-sm-12">
                <span>Esto es una prueba</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            
        });
    </script>
</body>
</html>

.

javascript html angularjs

asked by zerokira 03.11.2017 в 16:02

source

1 answer

Android Fill in with decimals how do I eliminate the last character of an impression made by FOR in java?

score 5 · Accepted Answer

You could do it in the following way:

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head> 
<body>   
   <div ng-controller="myCtrl">
       <ul ng-cloak id="tab-list" class="nav nav-pills tab-menu tabs nav-search">
           <li>
               <a data-toggle="collapse" data-target="#rent-tab" ng-click="toggle = !toggle" ng-hide="toggle">Busqueda</a>
               <a data-toggle="collapse" data-target="#rent-tab" ng-click="toggle = !toggle" ng-show="toggle">Volver</a>
           </li>
       </ul>

       <div id="rent-tab" class="collapse" ng-show="toggle">
           <div class="row">
               <div class="col-sm-12">
               <span>Esto es una prueba</span>
               </div>
           </div>
       </div>
   </div>
   <script>
       var app = angular.module('myApp', []);
       app.controller('myCtrl', function($scope) {
       });
   </script>
</body>
</html>

EXPLANATION NG-CLOAK

ng-cloak is a directive of angle that prevents the elements have a "flicker" when loading the page, when the example is loaded you can appreciate for a few seconds the button back and then hide when everything ends loading correctly, the ng-cloak is used to prevent that from happening.