With jQuery Demo
HTML:
<body>
<button>Custom</button>
<span>From:
<input type="text" id="from" />
</span>
<span>To:
<input type="text" id="to" />
</span>
</body>
CSS:
span {
display: none;
}
.show {
display: inline-block;
}
JS:
$("button").on("click", function () {
$("span").toggleClass("show");
});
With AngularJS Demo
Method one
HTML:
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<button ng-click="toggleCustom()">Custom</button>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom">To:
<input type="text" id="to" />
</span>
<span ng-show="custom"></span>
</div>
</body>
JS:
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = $scope.custom === false ? true: false;
};
}]);
Method two
HTML:
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<button ng-click="custom=!custom">Custom</button>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-hide="custom">To:
<input type="text" id="to" />
</span>
<span ng-show="custom"></span>
</div>
</body>
JS:
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.custom = true;
}]);