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

Internet Explorer 9 (IE9) causing CSS dropdown menu to be truncated due

Alter the status of a checkbox programmatically

Dismiss the Popover in Ionic 2

Implement the anti-flickering script for Google Optimize in a NextJS/ReactJS environment

Tips for automatically displaying user text based on its natural direction

What does "t=" represent in the socketIO URL?

The dropdown selection for redirecting to a URL is malfunctioning within a PHP while loop

Exploring ways to retrieve item metadata from a Stripe checkout session

step-by-step guide for using Ajax to bind the pageshow event in jQuery Mobile

What is the best way to save only the time in MySQL using Sequelize?

Enhance phonegap functionality by incorporating jQuery autocomplete for extensive result sets

hiding an "input type="file" element by using a button to conceal it

What is the mechanism through which the subtraction operator initiates the conversion of an array to a

Obtaining a string from a regular expression does not function as anticipated

React.js encountered an error: Objects cannot be used as a React child (found: object containing keys {type, data})

Tips for displaying a sub-menu upon hovering

The fit-content max-height property is not functioning properly in Firefox

What is the method for setting the content-type in an AJAX request for Android browsers?

Utilizing Angular JS to Manage Controller Events

Is it possible for Sequelize to utilize a getter or setter within a find query?