JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<body>

<div class="container" ng-app="plusMinusApp"  ng-controller="plusMinusController" ng-init="setToInitialState()">
<div class="row">
  <div class="col-xs-12 navText">
    <ul>
       <li><a href data-id='1' data-ng-click="idLocation($event)">ONE</a></li>
       <li><a href data-id='2' data-ng-click="idLocation($event)">TWO</a></li>
       <li><a href data-id='3' data-ng-click="idLocation($event)">THREE</a></li>
       <li><a href data-id='4' data-ng-click="idLocation($event)">FOUR</a></li>
       <li><a href data-id='5' data-ng-click="idLocation($event)">FIVE</a></li>
    </ul>
  </div>
</div>
<div class="row" ng-repeat="block in blocks">
    <div class="col-sm-4 col-xs-6" data-ng-class="{ 'coverThisBlock': isCovered[block.id]}">    
        <div class="divClass" 
        data-ng-class="{'active-selection': isSelected[block.id]}">
        {{block.id}}
        </div>
        <i data-ng-click="selectBlock(block.id)" 
        class="btn btn-primary text-center fa" 
        data-ng-class="{'fa-minus': isSelected[block.id], 'fa-plus': !isSelected[block.id]}"></i>
    </div>
    <div  data-ng-show="isSelected[block.id]" class="col-xs-3 textdiv">Hello</div>
</div>


</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
     
var myModule = angular.module('plusMinusApp', []);
myModule.controller('plusMinusController', function ($scope) {
          
  $scope.isSelected = {};
  $scope.isCovered = {};
  
  $scope.blocks = [{
    id: '1',
    block: "1",
  }, {
    id: '2',
    block: "2",
  }, {
    id: '3',
    block: "3",
  }, {
    id: '4',
    block: "4",
  }, {
    id: '5',
    block: "5"
  }];
 
 // nav Text triggers id's
    $scope.idLocation = function (e) {
        ids =...

CSS

body {
    padding-top: 15px;
}  
.activeClas{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    line-height:50px;
    width: 30%;
}
.divClass{
    width: 35%;
    height:50px;
    text-align:center;
    line-height:50px;
    float: left;
    left:15px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-right: 15px;
    color: orange;
    font-size: 18px;
    border:2px solid #000; 
    background-color: rgba(00,00,00,0.6);
}  
.textdiv{
    border:2px solid green; 
    background-color: rgba(100,100,100,0.1);
    height:50px;
    text-align:center;
    line-height:50px;
    margin-top: 25px;
}
i {
    color:#000;
    font-size: 40px;
    line-height:50px;
} 
.navText {
    color:#000;
    font-size: 14px;
    line-height:24px;
    float:left;
} 
.btn {
    height: 50px;
    margin-top: 25px;
    margin-left: 15px;
}    
.active-selection {
    background-color:rgba(100,100,100,0.1);
    width: 35%;
    font-size: 40px;
    text-align: center;
    border:2px solid green; 
} 
.coverThisBlock{
    width: 33%;
    height: inherit;
    background-color: rgba(00,00,00,0.8);
    z-index: 9;
} 
@media (max-width:420px){
.coverThisBlock{
    width: 80%;
}
}