Home / Questions / 114479
Accepted
zerokira
Asked: 2020-11-04 07:02:38 +0800 CST 2020-11-04 07:02:38 +0800 CST

Change word when I click

  • 772

How can I hide the word volverand show it when the divone with the class is opened collapseand hide the search word, that is, when he divdoes collapse, "this open" show the word return if it is not openshowing the search word, 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

1 Answers

  1. Best Answer

    You could do it like this:

    <!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>

    NG-CLOAK EXPLANATION

    ng-cloakis an angular directive that prevents the elements from having a "flicker" when loading the page, when the example is loaded you can see the back button for a few seconds and then it hides when everything finishes loading correctly, the ng-cloak It is used to prevent that from happening.

    • 5