Show div on button click with multiple divs

Question

PROBLEM

Hello! I want to show div when i click on button, but problem is that I have multiple divs with same class and I don't know how to call each div...

Image1 Image2 How it must look like

So how you can see in images I have 2 lists "Personal" and "Grocery", each of them have div "popup_information". I want when I click button in image1, div is vissible.. not both of them, but only in that list in which I pressed button. Like when I press button on Grocery list on bottom of the list must show div with buttons.

CODE

html:

   <div ng-repeat="lists in listsdata.lists">

         <div id="DIV_24">
             <button onClick="document.getElementsByClassName('popup_information').style.visibility='visible'" id="MORE_BUTTON">:</button>
             <div class="popup_information">
             <a href=""> <button id="DELETE_BUTTON">X</button></a>
             <a href=""> <button id="EDIT_BUTTON">E</button></a>
                 </div>

             <a href="#/{{lists.id}}">
            <div id="DIV_25">
                {{lists.name}}
            </div>
            <div id="DIV_26">
            </div>
        </div></a>

    </div>

css:

#DIV_24 > #MORE_BUTTON {
    padding: 5px 5px 5px 5px;
    background-color: #fbfbfb;
    border-radius: 5px;
    position: absolute;
    color: #666;
    font: normal 700 30px/1 "Calibri", sans-serif;
    text-align: center;
    right: 10px;
    top: 10px;
    border-color: transparent;
    visibility: hidden;
}

#DIV_24:hover > #MORE_BUTTON{
    visibility: visible;
    z-index: 200;
}

div.popup_information {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 70px;
    background-color: #ffffff;
    visibility: hidden;
}

At the moment I don't use any script, because I don't now how to call that div what i need..

MY IDEA

So my idea is to show popup_information when I click MORE_BUTTON, but that isn't so simple for me, because there can be more than one div with class "popup_information" and I don't know what I need to do to use each of them.. Would be great and I would be thankful if someone could update my css or write script for that, because I don't understand how that must work...

Answer 1

In response to your additional question "when I click outside somewhere buttons hide", I guess what you want is to hide the div.popup_information when it's open and user click on somewhere outside of it. You can use a custom directive to listen on document onClick event, and check if the event is from inside div.popup_information. If it's not and div.popup_information is open, then change the $scope data to hide it. Below code isn't perfect but I hope it at least show you how to achieve this by using a custom directive.

Please note I've introduced jQuery for $.contains().

angular.module('test', [])
  .controller('MainCtrl', function($scope) {
    $scope.listsdata = {
      lists: [{
        id: 1,
        name: 'list 1'
      }, {
        id: 2,
        name: 'list 2'
      }, {
        id: 3,
        name: 'list 3'
      }]
    };
  })
  .directive("closeOnOutsideClick", ['$document', function($document) {
    return {
      link: function($scope, $element, $attrs) {
        var $toHide = $element.find($attrs.closeOnOutsideClick);
        if ($toHide.length > 0) {
          $document.on("click", function(event) {
            if ($toHide.is(':visible') && !$.contains($element[0], event.target)) {
              $scope.lists.show = false;
              $scope.$apply();
            }
          })
        };
      }
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="test" ng-controller="MainCtrl">
    <div ng-repeat="lists in listsdata.lists">

      <div id="DIV_24" close-on-outside-click="div.popup_information">
        <button ng-click="lists.show = !lists.show">:</button>
        <div class="popup_information" ng-show="lists.show">
          <a href="">
            <button id="DELETE_BUTTON">X</button>
          </a>
          <a href="">
            <button id="EDIT_BUTTON">E</button>
          </a>
        </div>
        <a href="#/{{lists.id}}">
          <div id="DIV_25">
            {{lists.name}}
          </div>
          <div id="DIV_26">
          </div>
      </div>
      </a>
    </div>
  </div>

Answer 2

If you use this code it picks up the named class only within the parent div.

this.parentNode.getElementsByClassName('popup_information')[0]

which in your case is <div id="DIV_24"> etc..

... but JM Yang's answer is of course maybe more proper keep it all Angular

Answer 3

Since you are using Angular JS, this can be done elegantly in Angular way. When clicking on the button, you can introduce a variable to list to indicate whether the div should be displayed or not, and then on the div use ng-show referencing that variable to determine whether it should be show or hide.

  angular.module('test', [])
    .controller('MainCtrl', function($scope) {
      $scope.listsdata = {
        lists: [{id: 1, name: 'list 1'}, {id: 2, name: 'list 2'}, {id: 3, name: 'list 3'}]
      };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="test" ng-controller="MainCtrl">
    <div ng-repeat="lists in listsdata.lists">

      <div id="DIV_24">
        <button ng-click="lists.show = !lists.show">:</button>
        <div class="popup_information" ng-show="lists.show">
          <a href="">
            <button id="DELETE_BUTTON">X</button>
          </a>
          <a href="">
            <button id="EDIT_BUTTON">E</button>
          </a>
        </div>
        <a href="#/{{lists.id}}">
          <div id="DIV_25">
            {{lists.name}}
          </div>
          <div id="DIV_26">
          </div>
      </div>
      </a>
    </div>
  </div>