Increasing size of one div when clicked while reorganizing the others

Hey there! I was thinking about creating a container with 2 rows of 3 cards inside. I am using Bootstrap 4 for my grid and layout.

If you need some card examples, check out here.

<div class="container">
  <div class="row">
    <card-element />
    <card-element />
    <card-element />
    <card-element />
  </div>
</div>

Each of these elements are divs containing other divs to arrange the content, such as an image at the top and text for description.

I want the functionality where clicking on one of these elements will expand it in the middle while the others move to either side of the container, resizing to a smaller size (like thumbnails). I've tried using transform and translate for expansion, but I'm having trouble combining both functionalities.

I thought of implementing a couple of JQuery functions in these steps: 1. On click - The selected element expands while all others are removed using JQuery. 2. Once it expands, the other elements get appended to two sides within the container. These appended divs would be positioned at the left and right ends, respectively. 3. The transition involves the thumbnails of the other card-elements easing in and out during this process.

Any suggestions or references to similar problems/tasks would be greatly appreciated.

javascriptcsshtmlbootstrap-4transform

Answer №1

If you're looking to implement an accordion feature on your website, consider using Jquery-UI. There is a component called accordion that allows you to create collapsible sections. Check out the example code below:

$(function () {
    $("#accordion").accordion();
});
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Card 1</h3>
  <div>
    <p>
      Text of card 1...
    </p>
  </div>
  <h3>Card 2</h3>
  <div>
    <p>
      Text of card 2...
    </p>
  </div>
</div>

Answer №2

To achieve the desired effect, you can utilize the Bootstrap Collapse component in conjunction with jQuery to handle the toggling of CSS classes. Here's an example...

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').not(this).collapse("hide");
  $(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
  $(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});

$('.collapse').on('hide.bs.collapse', function () {
  $(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
  $(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});

You can further enhance the transition effects by incorporating CSS transformations as the classes change...

.row > [class*="col"], img{
    transition: all .3s ease;
}

Check out the demo here:

Keep in mind that some modifications may be necessary to tailor it precisely to your needs.

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

Unforeseen behavior in event binding causing knockout knockout

I implemented an event binding for the scroll event on a DIV. To add debounce functionality to the handler, I created a function on my model that generates the debounced handler. Then, in my view, I bind this factory function. I assumed that my factory fu ...

javascripteventsknockout.js

Angular JS has the capability to toggle the visibility of elements on a per-item basis as well as

I have created a repeater that displays a headline and description for each item. I implemented a checkbox to hide all descriptions at once, which worked perfectly. However, I also wanted to allow users to hide or show each description individually. I almo ...

javascriptangularjs

"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in c ...

javascriptthree.jsparticle-systemparticles

The "hover" effect is not activating on a carousel

I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...

htmlcsszurb-foundationorbit

What is the best way to enhance the visibility of the navigation items in my Bootstrap 4 navbar?

While working with Bootstrap 4, I encountered an issue where the text navigation items in the navbar were appearing semi-transparent regardless of my efforts to adjust the code. The dark blue background color of the navbar was causing the opacity to make i ...

htmlcssbootstrap-4

Issue in React Native: Undefined value is being referred to as an object when evaluating 'Object.keys(dataBlob[sectionID])'

As I work on my React Native application, I encountered a challenge when trying to display Facebook page status using the Facebook API in a ListView. Thankfully, this tutorial provided me with valuable insight and allowed me to successfully display the lat ...

javascriptiosfacebookreact-native

Retrieving the value from a concealed checkbox

I have been searching everywhere, but I can't seem to find a solution to this particular issue. There is a hidden checkbox in my field that serves as an identifier for the type of item added dynamically. Here's how I've set it up: <inpu ...

javascriptjquerycheckbox

How can I ensure that $routeProvider functions correctly within my AngularJS application?

I'm currently in the process of manually constructing a shell and trying to understand its functionality Shell Structure: - application (contains PHP files) - webroot -- app --- app.js -- templates --- main ---- login ----- login.html index.html ...

javascriptangularjsconfigurationangularjs-ng-route

AngularJS validation for checkboxes

I need to ensure that at least one checkbox is selected for a particular question. If none are selected, a validation error should be displayed. Can you suggest how I can achieve this functionality? My JavaScript code: $scope.onCheckBoxSelected=function() ...

javascripthtmlangularjscheckbox

The exported NextJS URL isn't functioning properly

Recently, I delved into the world of Next JS by following a tutorial on YouTube by Brad Traversy. In his guidance, I used next export to export the program and ran it using serve -s out -p 8000. While the page loads perfectly on localhost:8000, the issue a ...

javascriptnode.jsreactjsnext.js

Creating a circular gradient in CSS

Does anyone know the steps to create a radial gradient in CSS that will match the background shown below? ...

cssgradientradial-gradients

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

Tips for making a scrollable container that allows its contents to overflow without clipping?

Currently working on implementing a horizontal card row for my website with a unique hover effect - the cards lightly rotate and raise on hover. Here is a preview: https://i.sstatic.net/eDQ59.gif To make this row responsive, I added overflow-x: auto; to e ...

htmlcss

Is there a clash between flexbox and Google PageSpeed Insights when it comes to optimizing images?

I attempted to optimize the images on the page using Page Speed Insights. Currently, there are 3 images that need to be optimized, but Google is providing some odd results. The images change their appearance after optimization, even when setting image wid ...

cssflexboxpagespeedgoogle-pagespeed

A guide on implementing an asynchronous timeout error handler in feathers

Is there a way to implement an async-function timeout error handler as a hook in Feathers that is located in the service file to manage promises within hooks? This post was created at the suggestion of @Bergi on my previous question If you are interest ...

javascriptnode.jsfeathersjs

Enhancing the dropdown menu with a fixed value

In another file, I have a dropdown menu generated using a while loop. I want to include one static value (Select contract) in the dropdown. Currently, the dropdown looks like this: 1234 4321 2323 3232 I would like it to look like this: Select contract ...

phphtmlsql

Unable to transmit the error information to a response

Currently, I am in the process of making a POST request with a form-data type body. Within the body, there is specific data that can be found here: https://i.sstatic.net/XvRgJ.png In order to parse the data field (which is stringified JSON) in the body ...

javascriptnode.jsexpress

What steps can be taken to ensure that the JavaScript fetch() function is consistently accessing and updating the new data that is being added to the

I'm facing an issue with my JSON data file that I want to display on the screen. I have a function with a fetch() request that executes every time I click a button. Initially, it works perfectly by fetching the data and displaying it correctly. Howeve ...

javascriptjsonfetch-api

Tips on keeping the cursor constant in CSS margins

Currently, I have a div that has a width of 160px and a height of 80px. Strangely enough, the div also has a margin-left of 540px. Additionally, in my CSS, I've specified cursor:pointer. The issue arises when I move my cursor to the left of the div, ...

htmlcssmarginmouse-cursor

The react-router-dom seems to be malfunctioning, so let's simply render the "/"

Struggling to render multiple pages in React, I am a newbie and have been exploring various tutorials and pages. My stack includes React, Webpack, Babel, and ESLint with Airbnb configuration. When I render my React app, it appears like this. View of the ...

javascriptreactjswebpackbabeljseslint-config-airbnb