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" ng-repeat="block in blocks">
    <div class="col-sm-4 col-xs-6" data-ng-class="{ 'coverThisBlock': isCoverBlock[block.id]}">    
        <div class="divClass" 
        data-ng-class="{'active-selection': !isPlus[block.id]}">
        {{block.id}}
        </div>
        <i data-ng-click="selectBlock(block.id)" 
        class="btn btn-primary text-center fa" 
        data-ng-class="{'fa-minus': !isPlus[block.id], 'fa-plus': isPlus[block.id]}"></i>
    </div>
    <div  data-ng-show="isShowDiv[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.isPlus = {};
  $scope.isShowDiv = {};
  $scope.isCoverBlock = {};
  $scope.plusCount;
  $scope.blocks = [{
    id: '1',
    block: "1",
  }, {
    id: '2',
    block: "2",
  }, {
    id: '3',
    block: "3",
  }, {
    id: '4',
    block: "4",
  }, {
    id: '5',
    block: "5"
  }];
  
  $scope.setToInitialState = function() {
    $scope.plusCount = 0;
    $scope.blocks.forEach(function(block) {
      $scope.isPlus[block.id] = true;
      $scope.isShowDiv[block.id] = false;
      $scope.isCoverBlock[block.id] = false;
      $scope.plusCount += 1;
  	});
  };
 
  
  $scope.selectBlock = function(id) {
    // Toggle between 'plus' and 'minus' icon
    $scope.isPlus[id] = !$scope.isPlus[id];
    if ($scope.isPlus[id]) {
      $scope.plusCount += 1;
    }
    else {
      $scope.plusCount -= 1;
    }
   ...

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;
} 
.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%;
}
}