JSFiddle - React, Tailwind, and code Playground

by Sergio

HTML

<body ng-app="myApp">
    <div ng-controller="CompaniesController">
        <button ng-click="toggleSection(1)">Company 1</button>
        <button ng-click="toggleSection(2)">Company 2</button>

        <div class="section" ng-show="getSection(1)">
            <h2>Company 1 </h2>
            <span >Name:
                <input type="text" id="name" />
            </span>
            <span > blablabla:
                <input type="text" id="lf" />
            </span>
        </div>

        <div class="section" ng-show="getSection(2)">
            <h2>Company 2 </h2>
            <span >Name:
                <input type="text" id="from" />
            </span>
            <span > blablabla:
                <input type="text" id="to" />
            </span>
        </div>
        
    </div>
</body>

CSS

.section { 
    margin: 10px 0; 
    border: 1px dotted #aaa;
    padding: 20px;
}

JavaScript

angular.module('myApp', [])
    .controller('CompaniesController',['$scope', function($scope){

        $scope.section = 0;
        $scope.toggleSection = function (id) {
            $scope.section = id;   
        };
    
        $scope.getSection = function (id) {
            return $scope.section == id ? true: false
        };
        
        $scope.custom = true;
        $scope.toggleCustom = function() {
            $scope.custom = $scope.custom === false ? true: false;
        };
}]);