JSFiddle - React, Tailwind, and code Playground

by zumwalt

HTML

<div ng-controller="Ctrl">
<form>
    <input type="button" id="show-section1" value="Section 1" ng-click="section(1)" ng-class="{'btn-primary': is(1)}" />
    <input type="button" id="show-section2" value="Section 2" ng-click="section(2)" ng-class="{'btn-primary': is(2)}" />
    <input type="button" id="show-section3" value="Section 3" ng-click="section(3)" ng-class="{'btn-primary': is(3)}" />
</form>
<section id="section1" ng-show="is(1)">blah</section>
<section id="section2" ng-show="is(2)">blah2</section>
<section id="section3" ng-show="is(3)">blah3</section>
</div>

CSS

.btn-primary {
    background-color: #f00;
}

JavaScript

'use strict';

var App=angular.module('myApp',[]);

function Ctrl($scope){
    var section = 1;
    
    $scope.section = function (id) {
        section = id;   
    };
    
    $scope.is = function (id) {
        return section == id;
    };
}