JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, pushing down the subsequent rows on the page. The user should be able to close this expanded div or click on another div to return to the initial configuration.

Here is the current layout:

https://i.stack.imgur.com/TuBYN.png

Here is the desired outcome:

https://i.stack.imgur.com/AOfg5.png

HTML (utilizing Laravel framework):

<section class="content">
<div class="grid">
    @for ($i = 1; $i <= 35; $i++)
        <div class="gridcell" id="{{ $i }}">
            <h5>Space # {{ $i }}</h5>
            @foreach ($auctions as $auction)
                @if ($auction->position == $i)
                    <img src="{{ $auction->imgUrl }}" alt="{{ $auction->description }}">
                @endif
            @endforeach
        </div>
    @endfor 
</div>
</section>

CSS:

.grid {
    width: 100%;
    text-align: center;
}

.gridcell {
    display: inline-block;
    float: left;
    min-height: 150px;
    width: 180px;
    padding: 15px;
    margin: 10px 10px;
    border: 1px solid #000;
    min-height: 180px; 
}

Thank you!

javascripthtmlcsslaravel

Answer №1

The response provided at

Link to his jsFiddle: http://jsfiddle.net/XnfJx/

His solution can be found below

HTML:

<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the first image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the second image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the third image.
</div>

CSS:

div.info
{
    display: none;
}

JS:

$("div.item").click(function (){
    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block"); 
});

Answer №2

Click here to view the code

Attempting to create a similar design, I came up with the following:

HTML

<div id="container">
    <div class="col1">1</div>
    <div class="col1">2</div>
    <div class="col1">3</div>
    <div class="col1">4</div>

    <div class="drop"></div>
</div>

CSS

.col1 {
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin-bottom: 5px;
}

#container {
    width: 420px;
}

.drop {
    height: 100px;
    border: 1px solid black;
    margin-bottom: 5px;
    display: none;
}

JavaScript

$(".col1").on("click", function() {
    var info = $(this).html();
    if ($(".drop").html() == $(this).html() || !$(".drop").hasClass('active'))
        $(".drop").slideToggle().toggleClass('active').html(info);      
    else
        $(".drop").html(info);
});

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

Is there a way to run only one instance of puppeteer.launch() and simply forward pages to it in Node.js?

I have a concern regarding the code snippet below. It appears to be launching the browser on every request, potentially causing server issues on Heroku. I would like to modify it so that puppeteer is launched as a Singleton instance, where it only needs ...

javascriptnode.jsherokupuppeteer

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Can someone help me figure out how to use an AngularJS model as the value for an HTML attribute? For example: <div ng-controller="deviceWidth" width={{width}}> </div> Additionally, how can I achieve this within <style> markup? Where ...

javascripthtmlcssangularjsvariables

Switch up the stylesheet in WordPress when an administrator is signed in

Looking for a way to incorporate conditional PHP code into my theme that will load a different stylesheet when either an admin or a specific user (ID=1) is logged in. Does WordPress have a function that can make this happen? There's a particular div ...

phpcsswordpresswordpress-theming

A valid path is required in the form of a string when working with the HTTP module in Node.js

Currently, I'm working on an update checker that doesn't involve downloading the update. My main goal is to compare the version in the package.json file on GitHub with the one in my Electron app. However, when using this code, I encountered a "p ...

javascriptnode.jselectron

Attempting to extract tabular information from a script function housed within a webpage

I'm attempting to extract data from a table on the following website: When using BeautifulSoup to 'find' the 'table', I encountered a NoneType error since the table appears to be generated by a script function that fetches 90 rand ...

htmlpython-3.xbeautifulsoup

JQuery code causing issue with properly closing toggle menu

I am currently working on implementing a closing toggle menu for mobile devices and facing a minor issue. What I aim for is to allow users to close the toggle menu by tapping anywhere on the screen of their device while it is active. I have almost achieved ...

javascriptjquerymobilemenutoggle

Guide to implementing optional localization strings in React-Router paths

Incorporating react-router, I aim to implement internationalization for links following this format: domain.com/langISO/countryISO2/page Here are some examples of valid routes: domain.com/ -> Home Page domain.com/en/us -> Home Page domain.com/fr/f ...

javascriptreactjsreact-routerreact-router-v4

When sending an ajax request with HTML data as the payload

While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...

javascriptjqueryhtmlajax

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Can anyone help me modify Andris’ solution from this post: Convert seconds to days, hours, minutes and seconds to also include years, months, and weeks? I am currently running this code: getDateStrings() { console.log(req_creation_date); const toda ...

javascriptangulartypescript

Transferring shapes from a two-dimensional equirectangular view to surfaces in A-Frame

Currently, my goal is to create a hotspot editor for 360-degree images using A-Frame. The concept behind this project involves allowing users to draw on an equirectangular panorama and then having the tool convert those drawings into planes using THREE.Sh ...

javascriptthree.jsaframe

JavaScript - Display all comments

Here's the structure of my JSON data: { "comment_ds": [ { "c_user": [ "Alice", "Alice", "Alice", "Alice" ...

javascriptjsonajax

filtering an array based on a specific property will result in the original array remaining

Working on filtering an array of objects based on a certain property using the following code snippet: if (payment == Payment.CREDIT_CARD) { this.currenies.filter((currency: Currency) => currency.isFromEurope === true); console.log(this.currencies) ...

javascripttypescriptfilter

Is there a way to share another person's contact card using whatsapp-web.js?

Is it possible to send a contact card of someone else using whatsapp-web.js, even if the person is not saved in my phone's contact list? I want to send a contact card to someone who is on my phone's contacts, but the contact information I want to ...

javascriptnode.jswhatsapp

Is it possible to extract information from a form's POST request without relying on the traditional "action" attribute within form elements?

Last night, I was experimenting with ExpressJS and discovered something interesting when working with a simple code snippet: app.post('/contact', function(req, res, next) { res.send('Congratulations! You have submitted the form'); }) ...

javascriptformsexpressaxios

The NodeJS module 'request' is producing symbols instead of expected HTML content

Currently, I am delving into the world of Nodejs and experimenting with web scraping using node.js. My tools of choice are the node modules request and cheerio. However, when I attempt to request a URL, instead of receiving the HTML body, I get strange s ...

javascriptnode.jsnpmcheeriorequestjs

js - stop form submission

After clicking on a button with type="submit", the front-end validation starts, but I also need to perform server-side validation using Ajax. This includes checking if the name is already being used by another person. The issue arises when switching the b ...

javascripthtmlajaxforms

Replicate the functionality of a backend API using AngularJS

Currently, I am in the midst of creating a GUI for an application that is still undergoing API development. Although I have a vision of how it will look, it lacks functionality as of now. Hence, I need to replicate its behavior until the API is fully funct ...

javascriptangularjs

Increase the size of the embedded iframe in your Cordova application by using the pinch-to-zoom

I have been struggling with this issue for the past few days and am having trouble finding a solution.. I am trying to figure out how to embed an iframe in a cordova app (running on an iOS device) to display an external webpage while allowing users to pin ...

javascripthtmlioscordovaiframe

Using $.ajax() to store data in the database

Is there a way to save dynamically generated elements from my application.js file into the database? Would the code be similar to this example?: $.ajax({ type: "POST", data: { title: 'oembed.title', thumbnail_url: 'oembed.thumbnail_ur ...

javascriptruby-on-railsajaxjquery

Canvas not displaying image in JavaScript

I have a bird object with a draw function defined, but for some reason, the image is not showing up when called in the render function. Can someone please help me figure out what I'm doing wrong? Thanks in advance. EDIT: Upon further investigation, I ...

javascriptdrawimage