I need help figuring out how to position 4 divs in a row so that when one is clicked and expands with additional information, it pushes the bottom div down. All 8 divs have the same class. I attempted using display: inline-block, but all the lower 4 divs move when one expands. Any suggestions would be greatly appreciated. Thank you.
https://i.sstatic.net/Eugpb.jpg
Here is an example of how the expanded div should look after clicking:
Below is the PHP code I used to achieve this task within a WordPress environment:
get_header('home'); ?>
<?php
$args = array( 'post_type' => 'the_teams', 'posts_per_page' => 9999);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) :
$n=0;?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$n++;
if ($n == 1):?>
<div class="block-wrapper">
<?php endif;
if ($n < 3):?>
<div class="team<?php echo $n;?>">
<div class="holder">
<div class="line1"></div>
<div class="title"><?php echo the_title();?></div>
<div class="line2"></div>
</div>
<div class="image"><img src="<?php echo the_post_thumbnail_url(); ?>" /></div>
<div class="text"><?php echo get_field("short_description"); ?></div>
</div>
<?php endif;
if ($n ==2):
$n=0; ?>
</div>
<?php endif; ?>
<?php
endwhile;
endif;
?>
<?php get_footer(); ?>
To create the desired layout, I repeated the above HTML structure 4 times, with each iteration representing one of the green squares in the grid. Each set of information was enclosed in a container div with the class "block-wrapper." Once the iterations are complete, setting "display: inline-block" for block-wrapper along with appropriate margin-right styling will organize the content into columns. Here is how the final HTML would look like:
<div class="block-wrapper">
<div class="team1">
<div class="holder">
<div class="line1"></div>
<div class="title"></div>
<div class="line2"></div>
</div>
<div class="image"><img src=""></div>
<div class="text"></div>
</div>
<div class="team2">
<div class="holder">
<div class="line1"></div>
<div class="title"></div>
<div class="line2"></div>
</div>
<div class="image"><img src=""></div>
<div class="text"></div>
</div>
</div>
By following these steps and adjustments, you can successfully display the content in 4 columns on your WordPress website. Feel free to reach out if you need further assistance.
Feel free to check out my simplified single input field with submit button and yup validation in this StackBlitz. In addition, I have a predefined array of names that I would like to use for validation. The goal is to ensure that the name entered in the i ...
With 10000 files consisting of php, html, css, and png formats that are interconnected to operate the website's engine, I am looking for a way to perform bulk renaming in order to ensure proper functionality. Not only do I need to rename the actual fi ...
My webserver is up and running with all the http endpoints linked to the base URL: http://<some_name>/widget/ On the frontend, I have a ReactJS app. The issue arises after building the ReactJS app, as the built index.html references the following U ...
Utilizing ASP.NET MVC and jQuery, I am loading a PartialView via Ajax which has its own accompanying JavaScript file. Upon successful retrieval of the html content, it is inserted into the DOM. However, there can be a delay between the insertion and the ex ...
I'm in the process of developing a promise-based route and here is my current promise implementation: const allowEdit = (postid, username) => { return new Promise((resolve) => { db.query(`SELECT * FROM post WHERE id = ${postid} AND usernam ...
Struggling to select (set active class) in a v-for loop when one class is already selected. Here's the code and an explanation: These are my available subscriptions, with one already selected based on user data <ul> <li v-for="(s, key, ...
Is there a way to add multiple sources with different qualities like 1080p, 720p etc.? Thank you in advance. flowplayer('#my_player', { src: '../assets/videos/video_1080p.mp4', // title: 'This is just demo&apo ...
Currently, I am dealing with a two-dimensional array that results in two nested dnd-kit drag and drop fields. The nested dnd functions correctly; however, the first one sorts items when moved without any animations (even when moving my div). Below is the ...
(Just so you know, I really appreciate your help as I navigate through teaching myself). I'm currently working on recreating an array that was previously parsed from session storage. var entries = JSON.parse(sessionStorage.getItem('entries&apo ...
I have created a function that animates an object on the screen as follows: $interval(function() { $('#cloudLeftToRight').animate({ left: '+=250%', }, 7000, function() { $('#cloudLeftToRight').removeAt ...
I've been attempting to calculate the difference between two dates using date fns, but all I get is NaN as a result. import { format, differenceInCalendarDays, parseISO, formatDistance } from "date-fns"; import { ru } from 'date-fns/locale&apo ...
Hi there, I'm new to JavaScript I noticed that when I click the left and right arrows, the tabs circle back to the beginning However, I would like the circle to stop. When it reaches the fourth tab, it should not go back to the first. This should also ...
While attempting to run my Vue project with the command npm run serve I encountered an error message that read: [email protected] serve /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes vue-cli-service serve sh: 1: vue- ...
Seeking assistance with creating an edit form in React that utilizes data stored in Redux. The current form I have created is displaying the values correctly, but it appears to be read-only as no changes are being reflected when input is altered. Any advic ...
As a newcomer to react router, I am seeking guidance on setting it up in a specific scenario. Imagine we have a PHP application running on 'http://www.example.com'. Within this setup, there is a react application located at 'http://www.examp ...
Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...
After converting my model from Java to JavaScript using GWT 2.7, I have a set of properties with getValue() and setValue() methods that are not obfuscated. I am interested in using these properties in {{}} expressions, especially for data binding with ngM ...
Whenever I enter a story in the text box, it should trigger this API call: The retrieved data should be displayed in the browser. Currently, the API call is not being made. All the relevant code can be found in 'searchbar.js'. Could you please ...
Dealing with a seemingly simple issue, I am struggling to figure out how to load items into a select using jQuery. Working with the Materialize theme available at: The code snippet in question: <div class="input-field col s12"> <s ...
Within my code snippet below, I am able to retrieve a JSON Response: respArray = [] respArray = respBody.classifiers respBody = respArray if (respBody.length > 0) { respBody = applyPagination(respBody, reqParams.filter, option ...