https://stackoverflow.com/questions/44237537/

https://stackoverflow.com/questions/44237537/

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div ng-app="app" ng-controller="MainController">

  <!-- Techincal -->
  <div class="item">

    <div class="row">
      <div style="padding:10px; background: gray;" class="col boldText" ng-click="toggleContainer()"><span class="{{(showTechnicalDetails)?'ion-minus':'ion-plus'}}"></span>Technical</div>
    </div>

    <!--List-->
    <div class="item" style="margin-top:25px;" ng-if='showTechnicalDetails'>
      <div class="row centerized">
        <div class="col col-40"></div>
        <div class="col col-30">Min</div>
        <div class="col col-30">Max</div>
      </div>
      <div class="row">
        <div class="col col-40">Tech spec</div>
        <div class="col col-30">
          <input type="number" placeholder="0" ng-model="searchQuery.techMin">
        </div>
        <div class="col col-30">
          <input type="number" placeholder="5" ng-model="searchQuery.techMax">
        </div>
      </div>
      <div class="row">
        <div class="col col-40">Radius</div>
        <div class="col col-30">
          <input type="number" placeholder="-1000" ng-model="searchQuery.radiusMin">
        </div>
        <div class="col col-30">
          <input type="number" placeholder="1000" ng-model="searchQuery.radiusMax">
        </div>
      </div>
    </div>
  </div>


</div>

JavaScript

/* ANGULAR */
angular
  .module('app', [])
  .controller('MainController', MainController)

function MainController($scope) {

  $scope.showTechnicalDetails = false;
  $scope.toggleContainer = function(){
    $scope.showTechnicalDetails = !$scope.showTechnicalDetails;
  }

}