Toggle the visibility of multiple divs depending on a specific attribute value

Question

Toggle the visibility of multiple divs depending on a specific attribute value

I previously inquired about this issue, but I believe my wording was unclear and the responses focused on how to display or hide a group of divs when clicking a button. While I understand that concept, my specific challenge is slightly different. Let me provide a more detailed explanation:

I have multiple divs containing images

<div ng-controller='PhotoController'>
  <button>SHOW ALL</button>
  <button>SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
 </div>
</div>

The {{photo.filtered}} value is retrieved from the database and will be an integer. My goal is for the SHOW FILTERED button to only display divs with the class image-containers that contain images where the data-show attribute is not zero.

When clicking SHOW ALL, all images should be displayed regardless of the data-show value.

I am aware that by adding ng-show={{photo.filtered}} to the image-container div, I can show images with a non-zero data-show attribute. However, I am unsure how to adjust this criteria when the SHOW ALL button is clicked.

Any suggestions would be greatly appreciated.

javascript jquery html css angularjs

Answer 1

Answer №1

ng-show and ng-hide directives require an expression, so you can include a condition like showAll || photo.filtered

<div ng-controller='PhotoController'>
  <button ng-click="showAll = true;">SHOW ALL</button>
  <button ng-click="showAll = false;">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='showAll || photoFiltered' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
  </div>
</div>

With this code, clicking on show all will make all divs visible regardless of whether the photo.filtered property is true or false. However, setting showAll to false will only show divs with a photo.filtered property that is true.

Answer 2

ng-show and ng-hide directives require an expression, so you can include a condition like showAll || photo.filtered

<div ng-controller='PhotoController'>
  <button ng-click="showAll = true;">SHOW ALL</button>
  <button ng-click="showAll = false;">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='showAll || photoFiltered' class='image-container'>
     <img ng-src ='{{photo.src}}' data-show='{{photo.filtered}}'>
     <br/>
  </div>
</div>

With this code, clicking on show all will make all divs visible regardless of whether the photo.filtered property is true or false. However, setting showAll to false will only show divs with a photo.filtered property that is true.

Answer 3

Answer №2

If this response does not provide the required assistance, please provide feedback in the form of a comment. I have included additional image-container div elements to replicate the full scenario for testing and deployment purposes. The rationale behind fetching the image-container every time the button is clicked is to ensure that all are accounted for when the program executes, especially in cases where frequent AJAX updates are involved. As the nature of this program suggests potential AJAX usage without specific details, I have taken necessary precautions. Feel free to reach out if further assistance is needed.

To assign custom attributes using JavaScript, utilize the following functions... elem.getAttribute('attr-name');//retrieve attribute value elem.setAttribute('attr-name','attr-value');//assign attribute value

window.onload = function() {
  var showAllButton = document.getElementById('showAllButton');
  var showFilteredButton = document.getElementById('showFilteredButton');
  showAllButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      containers[i].style.display = 'block';
    }
  };
  showFilteredButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      if (containers[i].children[0].getAttribute('data-show') > 0) {
        containers[i].style.display = 'block';
      } else {
        containers[i].style.display = 'none';
      }
    }
  };
};

<div ng-controller='PhotoController'>
  <button id="showAllButton">SHOW ALL</button>
  <button id="showFilteredButton">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='14'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='5'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='0'>testing
    <br/>
  </div>
</div>

Answer 4

If this response does not provide the required assistance, please provide feedback in the form of a comment. I have included additional image-container div elements to replicate the full scenario for testing and deployment purposes. The rationale behind fetching the image-container every time the button is clicked is to ensure that all are accounted for when the program executes, especially in cases where frequent AJAX updates are involved. As the nature of this program suggests potential AJAX usage without specific details, I have taken necessary precautions. Feel free to reach out if further assistance is needed.

To assign custom attributes using JavaScript, utilize the following functions... elem.getAttribute('attr-name');//retrieve attribute value elem.setAttribute('attr-name','attr-value');//assign attribute value

window.onload = function() {
  var showAllButton = document.getElementById('showAllButton');
  var showFilteredButton = document.getElementById('showFilteredButton');
  showAllButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      containers[i].style.display = 'block';
    }
  };
  showFilteredButton.onclick = function() {
    var containers = document.getElementsByClassName('image-container');
    for (var i = 0; i != containers.length; i++) {
      if (containers[i].children[0].getAttribute('data-show') > 0) {
        containers[i].style.display = 'block';
      } else {
        containers[i].style.display = 'none';
      }
    }
  };
};

<div ng-controller='PhotoController'>
  <button id="showAllButton">SHOW ALL</button>
  <button id="showFilteredButton">SHOW FILTERED</button>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='14'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='5'>testing
    <br/>
  </div>
  <div ng-repeat="photo in photos" ng-show='isShowImage' class='image-container'>
    <img ng-src='{{photo.src}}' data-show='0'>testing
    <br/>
  </div>
</div>

Answer 5

Answer №3

Set up a variable to control the display mode and create a function to determine if an image should be shown, like so:

JavaScript:

.controller('ImageController', function($rootScope, $scope) {

    $scope.ShowAll = true;

    $scope.canShowImage = function(image) {
        return ($scope.ShowAll || image.filtered == 1);
    };

});

HTML:

<div ng-controller='ImageController'>
  <button ng-click="ShowAll = true">SHOW ALL</button>
  <button ng-click="ShowAll = false">SHOW FILTERED</button>
  <div ng-repeat="image in images" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{image.src}}' ng-show='canShowImage(image)'>
     <br/>
 </div>
</div>

I hope this information is useful.

Answer 6

Set up a variable to control the display mode and create a function to determine if an image should be shown, like so:

JavaScript:

.controller('ImageController', function($rootScope, $scope) {

    $scope.ShowAll = true;

    $scope.canShowImage = function(image) {
        return ($scope.ShowAll || image.filtered == 1);
    };

});

HTML:

<div ng-controller='ImageController'>
  <button ng-click="ShowAll = true">SHOW ALL</button>
  <button ng-click="ShowAll = false">SHOW FILTERED</button>
  <div ng-repeat="image in images" ng-show='isShowImage' class='image-container'>
     <img ng-src ='{{image.src}}' ng-show='canShowImage(image)'>
     <br/>
 </div>
</div>

I hope this information is useful.

Answer 7

Answer №4

Here is an example of a possible solution

 $('.filter_button').click(function(){
      $('.filtered_items').hide();
      $.each($('.filtered_items',function(i,v){
           if($(v).find('img:first()').data('visible')) $(v).show();
      });
 });
 $('.show_all_items').click(function(){
      $('.filtered_items').show();         
});

Answer 8

Here is an example of a possible solution

 $('.filter_button').click(function(){
      $('.filtered_items').hide();
      $.each($('.filtered_items',function(i,v){
           if($(v).find('img:first()').data('visible')) $(v).show();
      });
 });
 $('.show_all_items').click(function(){
      $('.filtered_items').show();         
});

Toggle the visibility of multiple divs depending on a specific attribute value

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The jQuery AJAX request is not returning a truthy value when parsing

Tips for achieving a static background image while allowing scrolling on a webpage in asp.net

What could be causing getStaticProps to receive an incorrect slug value?

Create an HTTP service using promises in AngularJS

Converting user IDs to usernames in discord.js

Displaying a JQuery notification when hovering over a link

Save all dynamically received data from a form in PHP as an array

Codeigniter displays a view with an empty variable

Building and executing an Angular 2 program on the Windows platform: Step-by-step guide

Tips for storing arrays in AngularJS with JavaScript

Is there a way to modify the button's color upon clicking in a React application?

Adding middleware to the res.render() function can be extremely helpful when dealing with a large number

Dealing with a jQuery/JavaScript issue involving thumbnail images

Ensuring Package Security in NodeJS and NPM

Activate animation when a user clicks on a link

How to update the selected autocomplete item in Vue using programming techniques?

Extract branch, path, and URL from the .gitmodules file by utilizing JavaScript Regex

Adjust the path of an element as it decreases in size

Utilize Jquery to send a POST request and obtain a corresponding reply from the Node

Stop the ngRepeat after completing one iteration, by utilizing the "in" directive