What is the best way to use html, css, jquery, and bootstrap to show or hide images without any extra space or alignment issues

I am looking to showcase 6 images on a page using the Bootstrap grid layout. The images should be displayed in two rows, with 3 images in each row. Additionally, I want to implement a filter functionality using Isotope, so users can click on a specific category (e.g. "marine") to view related images. Initially, I want to display only 3 images, with the remaining 3 images hidden. Upon clicking a "See more" button, the hidden images should be revealed. It is crucial that the images remain aligned properly, as they are when all 6 images are visible. When the extra images are hidden, I do not want them to occupy space on the page. The "See more" button should be placed before the first row of images.

I have tried using the display:none CSS property to hide the images, but it still takes up some space on the page.

If anyone can assist me in achieving this, I would greatly appreciate it.

Thank you in advance!

javascripthtmlcssbootstrap-4

Answer №1

Utilizing the d-none class from Bootstrap can significantly assist in your task.

const images = document.getElementsByClassName("img");

function filter(category) {
  Array.from(images).forEach(image => {
    if (category === null || image.dataset.category === category) {
      image.parentElement.classList.remove("d-none");
    } else {
      image.parentElement.classList.add("d-none");
    }
  });
}
.img {
  margin: 10px 0 0;
  
  background-color: #ddd;
  text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcfd0cfcfdacd91d5ccff8e918e89918f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button onclick="filter(null)">all</button>
<button onclick="filter('marine')">marine</button>
<button onclick="filter('life')">life</button>

<div class="row">
  <div class="col-4"><div class="img" data-category="marine">1</div></div>
  <div class="col-4"><div class="img" data-category="life">2</div></div>
  <div class="col-4"><div class="img" data-category="marine">3</div></div>
  <div class="col-4"><div class="img" data-category="life">4</div></div>
  <div class="col-4"><div class="img" data-category="life">5</div></div>
  <div class="col-4"><div class="img" data-category="life">6</div></div>
</div>

Answer №2

One way to manipulate objects in CSS is by using the display: none; property to hide them, and then using display: block; to show them again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

Divide a string into separate numbers using JavaScript

This snippet of code is designed to search the table #operations for all instances of <td> elements with the dynamic class ".fuel "+ACID: let k = 0; let ac_fuel = 0; parsed.data.forEach(arrayWithinData => { let ACID = parsed.data[k][0]; ...

javascriptjquerystringsplitsum

Utilizing JSON data for efficient React component rendering

As a newcomer to React, I am currently in the process of constructing a dashboard that showcases data from three different sensors. The information regarding these sensors is stored in a single JSON file where each sensor has its own ID and name. This JSON ...

javascriptjsonreactjsaxios

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

"Which is better for handling form data: using $.ajax with hidden fields or PHP form

Creating a streamlined admin tool using PHP and JQuery to handle image data management is my current project. The main goal of this utility is to enable an admin to retrieve images from a database, view associated tags for each image, and add new tags as n ...

javascriptphpjqueryhtmlajax

What could be the reason behind React's decision to not convert JSX to an HTML component and instead return [object Object]?

Please locate the specified console log within the code snippet provided below. This particular console log outputs a string value, indicating that an object is not being passed in this instance. However, despite this, React fails to recognize the JSX an ...

htmljsonreactjsdomjsx

What is the best way to create a list from a matrix using JavaScript?

I have an array structured as follows: const input_array= [ ["red", "green"], ["small", "medium"], ["x", "y", "z"] //... can have any number of rows added dynamically ...

javascriptvue.js

Displaying the line number and filename in Mongodb errors

After transitioning from mongodb node native driver 2.x to 3.x, I encountered errors like the following: The third parameter to find() must be a callback or undefined I understand how to resolve this issue, but I am unsure which file it is located in. Is ...

javascriptnode.jsmongodbnode-mongodb-native

Transferring the value stored in the value attribute to a different PHP page?

I am attempting to pass the value from the value attribute in button using a form with the method POST to "landlord_home.php". However, when I click on the button to navigate to the next page "edit_post.php", it triggers the PHP validation code on that pag ...

phphtmlmysql

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

htmlcssflexbox

What is the process for implementing a component in antdesign when using vue-cli and vue 3?

I followed the instructions provided in the documentation here. These are the steps I took: vue create example-app cd example-app I selected the vue 3 preset. Then, I made changes to the script in main.js import Vue from 'vue'; import Button f ...

javascriptvue.jsantd

Retrieving information through callback functions

A function I developed checks a list of tags that are submitted to it, sorting the good ones into a "good" array and the bad ones into a "bad" array. This process occurs within a callback, allowing the rest of my code to continue once complete. However, I ...

javascriptjquery

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Setting a value in the selectpicker of rsuitejs involves assigning a specific value to the

const _DATA = [{ code: 'code1', name: 'Jagger' },{ code: 'code2', name: 'Tigger' },{ code: 'code3', name: 'Lion' }] <SelectPicker data={_DATA.map(x => {return {label: x.n ...

javascriptreactjstypescriptnext.jsrsuite

Instructions for modifying the color of the close button in the angularjs ui-select module

I am currently using ui-select for multiple selection in a dropdown. When an item is selected, it displays a cross button on the upper right corner of the selected item. Is there a way to change the color of the cross button to red? <ui-select multip ...

javascriptangularjsui-select

Opening an HTML file in Eclipse is a simple process that can be

Q1) Is there a way to open this file in a browser for testing? Q2) Can I quickly open this in Chrome from Eclipse and test it? click here for image ...

htmleclipse

Populate your HTML form with Bootstrap 4 Popover Styling

Currently in the process of upgrading from Bootstrap 3. I previously had a form within some popovers, but now it's broken with empty content. I can't figure out what has changed to cause this issue. The form is shown dynamically, but the problem ...

jqueryformsbootstrap-4popover

Error when handling JSONP: Unexpected token colon in SyntaxError

Encountering a similar issue to the ones discussed in this JSON Uncaught SyntaxError thread and this JSONP Unexpected Token error thread. I attempted to fetch Divvy data through a JSONP call to avoid using a server for my simple front-end application. $. ...

javascriptjqueryajaxjsonjsonp

Creating custom functions within views using Sencha Touch 2

I'm having trouble creating my own function in Sencha Touch 2 and I keep receiving an error: Uncaught ReferenceError: function22 is not defined The issue seems to be coming from my Position.js file located in the View directory. Ext.define(' ...

javascriptmodel-view-controllergoogle-maps-api-3sencha-touchsencha-touch-2