JSFiddle - React, Tailwind, and code Playground

by wittwerj

HTML

<div ng-app="">   
    <div ng-controller="HomeCtrl">Services: <span ng-repeat="service in services">
        <span id="{{service.id}}">
            <a href="#" ng-click="visible.service = service.id">
                {{service.label}}
            </a>
        </span>
        <span ng-show="! $last"> | </span>
        </span> 
        <span ng-show="visible.service == 'music'">
            <p>premade html code that anyone can edit for music</p>
        </span>
         <span ng-show="visible.service == 'voip'">
            <p>premade html code that anyone can edit for voip</p>
        </span>
         <span ng-show="visible.service == 'websites'">
            <p>premade html code that anyone can edit for websites info</p>
        </span>
         <span ng-show="visible.service == 'svn'">
            <p>premade html code that anyone can edit for svn repository info</p>
        </span>
    </div>
</div>

CSS

body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

function HomeCtrl($scope) {
    $scope.visible = {
        service: 'voip'
    }
    $scope.services = [{
        "id": "music",
            "label": "Music",
            "show": false
    }, {
        "id": "websites",
            "label": "Websites",
            "show": false
    }, {
        "id": "svn",
            "label": "SVN Repos",
            "show": false
    }, {
        "id": "voip",
            "label": "VOIP",
            "show": true
    }];

    $scope.showElement = function (service) {
        $scope.hideAll();
        return service.show = true;
    };

    $scope.hideAll = function () {
        angular.forEach($scope.services, function (service) {
            service.show = false;
        });
    };

    $scope.getServiceVisibilityByElementId = function (id) {
        for (var i = 0; i < $scope.services.length; i++) {
            var service = $scope.services[i];
            if (id == service.id) {
                return service.show;
            }
        }
    };
}