Images that are collapsible and fully responsive are experiencing functionality issues

I am working on a design where clicking on an image will reveal additional information in a collapsible div underneath the image row. The challenge I'm facing is ensuring that this collapsible div spans across the full container regardless of screen size.

Currently, my implementation results in the collapsible div with class ".info" shifting left and right based on which image is clicked. My goal is to have the ".info" div remain fixed within the container for all rows.

For instance, when an image from the first row is clicked, the corresponding ".info" div should display the information. Then, if an image from the third row is clicked, the content in the same position changes without moving the ".info" div. Furthermore, clicking an image from the second row should close the previously open ".info" and reveal the new content under the second row while spanning the full width of the container.

javascripthtmlcssbootstrap-5

Answer №1

Consider implementing this CSS configuration to enhance your design. No need to make changes in the HTML and JavaScript files, just update the provided CSS code.

function toggleInfo(element) {
            const allPartners = document.querySelectorAll('.partner');
            allPartners.forEach(partner => {
                if (partner !== element) {
                    partner.classList.remove('active');
                }
            });
            
            element.classList.toggle('active');
        }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.partner {
  position: relative;
  width: calc(25% - 5px); /* 4 images per row with 5px gap */
  cursor: pointer;
  margin-bottom: 20px; /* Space for the info box */
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  justify-content: center;
  align-items: center;
}

.name {
  color: white;
  font-size: 1.5rem;
  z-index: 1;
}

.info {
  display: none;
  background-color: white;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px; /* Adds space between image and info */
}

.partner.active .info {
  display: block;
  animation: slideDown 0.3s ease;
}

.partner.active .image-wrapper img {
  opacity: 1;
}

.partner:not(.active) .image-wrapper img {
  opacity: 0.5;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    /* Adjust as needed */
    opacity: 1;
  }
}

/* Responsive Design */

@media (max-width: 800px) {
  .partner {
    width: calc(50% - 5px); /* 2 images per row on smaller screens */
  }
}

@media (max-width: 500px) {
  .partner {
    width: 100%; /* 1 image per row on very small screens */
  }
}
<body>
    <div class="container">
        <!-- Generate 8 partner entries with placeholder images -->
        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 1">
                <div class="gradient">
                    <span class="name">Partner 1</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 1...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 2">
                <div class="gradient">
                    <span class="name">Partner 2</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 2...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 3">
                <div class="gradient">
                    <span class="name">Partner 3</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 3...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 4">
                <div class="gradient">
                    <span class="name">Partner 4</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 4...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 5">
                <div class="gradient">
                    <span class="name">Partner 5</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 5...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 6">
                <div class="gradient">
                    <span class="name">Partner 6</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 6...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 7">
                <div class="gradient">
                    <span class="name">Partner 7</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 7...</p>
            </div>
        </div>

        <div class="partner" onclick="toggleInfo(this)">
            <div class="image-wrapper">
                <img src="https://via.placeholder.com/200x300" alt="Partner 8">
                <div class="gradient">
                    <span class="name">Partner 8</span>
                </div>
            </div>
            <div class="info">
                <p>More information about Partner 8...</p>
            </div>
        </div>
    </div>

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

Display the content as a clickable link using Jquery

Here is the view I have created using .NET MVC3: function DisplayingGrid () { var Geo=$('#ddlGeo').val(); var Vertical=$('#ddlVertical').val(); var Month=$('#ddlMonth').val(); if(Vertical=="All") { var Flag=1; ...

cssajaxjquery-uijquery

Accessing JSON array values in a nested controller in AngularJS can be achieved by using

How can I access a Json array value in another controller? I am working with nested controllers where the nested controller should return the first character of the first name and last name. For example, if my first name is Anand Jee, it should return AJ. ...

javascriptangularjsjson

Sending information from Node.js to the backend using AJAX involves a seamless communication process

I'm relatively new to working with AJAX, so please excuse any misunderstandings I may have. I am still in the process of learning. My current task is quite simple. I have a backend file named server.js, an index.html file, and a script.js file. It&ap ...

javascriptjquerynode.jsajaxexpress

The HTML is not rendering as planned

I have 2 files, test.html <!DOCTYPE html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./test/jquery.min.js"></script> </head> <body> ...

javascripthtml

I possess a collection of objects, where each object is composed of maximum and minimum key-value pairs. What is the method to determine which object includes a specified value within it?

I have a list of insurance rates structured like this const insuranceRate = [ { "min_value": 1, "max_value": 25000, "add": 328 }, { "min_value": 25001, "max_value": 25500, "add& ...

javascriptarraysjavascript-objects

Using Vue.js, the 'import' statement is not functional when used in an external JavaScript file

Allow me to clarify... I am encountering an issue with my utils.js file: import dayjs from 'dayjs'; //https://github.com/iamkun/dayjs exports.utils = (function() { someDateFunction() { ...some dayjs function calls .... } })(); ( ...

javascriptvue.jsimportvuejs2

Innovative grid system powered by AngularJS

I've structured my code into separate layers: 1. A factory that handles all of my $http requests and returns a promise. 2. A controller that manages the promise using a then function to assign it to a $scope variable for display on a gridview. Now, I ...

javascriptangularjsgridviewangularjs-directiveangularjs-scope

When you hover over the vertical sidebar menu in Bootstrap material design, a submenu will appear

Looking to create a three-column display that functions as one submenu when hovering over each menu item? <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="vertical-nav"> <li>&l ...

htmlcsstwitter-bootstrap

Guide on how to retrieve a single document (mongoose/mongoDB)

Storing data in a database is crucial for many applications. { "_id": "62fa5aa25778ec97bc6ee231", "user": "62f0eb5ebebd0f236abcaf9d", "name": "Marketing Plan", "columns": [ { ...

javascriptnode.jsmongodbexpressmongoose

An object rotating in a loop with Three.js will not cast a shadow over the entire scene

Why are some cubes in my loop not casting shadows? Despite using a directional light that should cast shadows on all cubes, the shadowing stops after around 5 columns. let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5); dirLight.position.set(300, - ...

javascriptloopsthree.jsshadowlight

Adding a plethora of HTML using jQuery

Struggling to create a single-page website, I've found myself relying heavily on jQuery's .append function. But surely, there has to be a more efficient method for appending large chunks of code (like tables, graphs, etc.) onto a page. Take this ...

javascriptjqueryhtmlajax

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element

Utilize Angular HttpClient to send a new Array created from fresh FormData to the server

I have an Array of Objects that contains files (images) with unique fields. When submitting, a new Array of Objects is sent to the server using Angular HttpClient. // Original Array of Objects let originalArray = [ { "name": & ...

htmlarraysangulartypescriptform-data

Trouble with React routes: only fixed after refreshing the page

import React, { useEffect, useState } from 'react'; import { Container, AppBar, Typography, Grow, Grid, useTheme } from '@material-ui/core'; import { useDispatch } from 'react-redux'; import { BrowserRouter, Router, Route, Swi ...

javascriptreactjsexpress

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

javascriptjquerycss

Reduce the number of divs on a webpage while incorporating animated transitions

I've been attempting to incorporate an animation on the width property for my div .panels. I've tried using transition-property in CSS and also with .animate() in jQuery, but unfortunately, it doesn't seem to be working. I also noticed that ...

javascriptjquerycssjquery-animatecss-animations

Determine if a MySQL query in node.js returns no results

I'm trying to determine if there are no matching results in MySQL using Node.js. How can I achieve this? mysql.query("select * from table1 where name = 'abcd'", function(error, result, field) { if(error) { handleNoError(error); ...

javascriptmysqlnode.jsnode-mysql

sending data from angular controller to a node server

Having trouble with my Angular controller that posts to the node server. The function triggering the post is giving me a 404 (Not Found) error when running it. I've tried rewriting the post multiple times but can't seem to locate the issue. If ...

javascriptangularjsnode.jsexpress

Struggling to position the newest messages at the bottom of the list

I'm working on creating a web chat system similar to IRC where the latest messages should always be at the bottom of the chat window. Below is my attempt, but unfortunately it's not working as expected: ...

htmlcsschat

Only display icons when hovering over the icon, not the entire div

Attempting to create a pop-out menu where the main icon triggers other icons to slide out left and right upon hover or click. The issue currently is that the pop-out occurs whenever hovering within the div container, rather than just on the main icon (icon ...

css