Displaying multiple div elements when a button is clickedLet multiple divs be

Question

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE

Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div...

Image1 Image2 Desired Outcome

As shown in the images, I have two lists, "Personal" and "Grocery", each containing a div named "popup_information". My goal is to make only the corresponding div visible when the button in that list is clicked. For instance, clicking the button in the Grocery list should reveal the div at the bottom of that specific list.

SOLUTION

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

I currently do not have any script implemented as I am unsure how to target the specific div I need...

REQUEST

My plan is to show the popup_information when MORE_BUTTON is clicked. However, this task proves challenging due to multiple instances of the div with the same class. Any assistance in updating my CSS or providing a script would be greatly appreciated, as I struggle to grasp the required functionality...

javascript jquery html css

Answer 1

Answer №1

Utilizing Angular JS allows for a more streamlined approach to achieving this task. By implementing a variable within the list when clicking on a button, you can control whether the div is visible or hidden. Using ng-show on the div element and referencing the variable enables you to dynamically show or hide it based on the designated conditions.

  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>

Answer 2

Utilizing Angular JS allows for a more streamlined approach to achieving this task. By implementing a variable within the list when clicking on a button, you can control whether the div is visible or hidden. Using ng-show on the div element and referencing the variable enables you to dynamically show or hide it based on the designated conditions.

  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>

Answer 3

Answer №2

When this code is utilized, it specifically targets the specified class only within the encompassing parent container.

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

The specific scenario here involves <div id="DIV_24">, among others.

However, it may be more appropriate to follow JM Yang's suggestion and maintain an Angular approach for consistency.

Answer 4

When this code is utilized, it specifically targets the specified class only within the encompassing parent container.

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

The specific scenario here involves <div id="DIV_24">, among others.

However, it may be more appropriate to follow JM Yang's suggestion and maintain an Angular approach for consistency.

Answer 5

Answer №3

When you click outside, the buttons hide in response to your query. To achieve this functionality of hiding the div.popup_information when it's open and the user clicks somewhere outside of it, a custom directive can be used to listen to the document onClick event. By checking if the click event is not from inside div.popup_information while it is open, the $scope data can be modified to hide it. The code snippet provided below may not be perfect, but it should give you an idea of how to implement this using a custom directive.

Note that jQuery has been introduced 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 6

When you click outside, the buttons hide in response to your query. To achieve this functionality of hiding the div.popup_information when it's open and the user clicks somewhere outside of it, a custom directive can be used to listen to the document onClick event. By checking if the click event is not from inside div.popup_information while it is open, the $scope data can be modified to hide it. The code snippet provided below may not be perfect, but it should give you an idea of how to implement this using a custom directive.

Note that jQuery has been introduced 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>

Displaying multiple div elements when a button is clickedLet multiple divs be

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing difficulties with NPM installation

Incorporating an SVG with CSS styling from a stylesheet

Visual Studio Code unable to locate source maps for typescript debugging

Addressing the Cross Domain Issue when Implementing DHIS 2 API with jQuery

Having trouble with retrieving JSONP data? Unsure how to access the information?

Unable to set a JSON data as a value for a JavaScript variable

Challenges with resizing in Bootstrap

The hidden Material UI Collapse component is still occupying space on the page

Determine total and showcase it as the range slider is adjusted

Angular with D3 - Semi-Circle Graph Color Order

Loading external libraries in Angular2: A step-by-step guide

Filtering and selecting tables in HTML

Utilize React Helmet for Dynamic Page Titles

Tips for separating these two words onto two separate lines

Using jQuery to target a specific item from a retrieved list of elements

Looking to develop a dynamic password verification form control?

Setting a default value in a dynamic dropdown using AngularJS

Steps to display a div on top of a background image

Utilizing jQuery/Ajax for dynamically loading a targeted PHP page by its specific id

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?