Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4.

I've experimented with Flexbox and CSS columns without success. Even tried implementing CSS Grid, but I'm facing an issue where expanding one accordion item causes the other side to expand as well. I've shared a codepen to illustrate the problem.

Update: I overlooked a crucial detail. This is for a Wordpress site, utilizing the Advanced Custom Fields (ACF) plugin to create a repeater field for the FAQ items. These items are outputted as an array, making the number of items unpredictable. They should be displayed in two columns, except when there's only one item.

The HTML structure is as follows:

<ul id="faq-accordion" class="list-unstyled">
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="card-header" id="heading1">
    <h3>
      <button class="btn btn-link">Accordion 1</button>
    </h3>
    </div>
    <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
      <div class="card-body">contents
      </div>
    </div>
  </li>
</ul>

Here is a snippet of my SCSS:

#faq-accordion{
  padding: 40px 30px 60px 30px;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto;
  grid-auto-flow: row;
  height: auto;
  width: 500px;
  .card-faq{
    margin: 0 15px 20px 15px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(0,0,0,.1);
  }

You can view the codepen here: https://codepen.io/LemonNick/pen/NEjJPQ

I would greatly appreciate any assistance or suggestions to overcome this challenge! It has been quite a struggle trying to figure it out.

htmlcssgridaccordion

Answer №1

If you're facing an issue with the shadow expanding, a simple solution is to enclose the contents of .card-faq in another div and apply the shadow effect there.

#faq-accordion {
  padding: 40px 30px 60px 30px;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto;
  grid-auto-flow: row;
  height: auto;
  width: 500px;
}

.card-faq {
  margin: 0 15px 20px 15px;
}

.shadow {
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}
<ul id="faq-accordion" class="list-unstyled">
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="shadow">
      <div class="card-header" id="heading1">
        <h3>
          <button class="btn btn-link">Accordion 1</button>
        </h3>
      </div>
      <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
        <div class="card-body">contents
        </div>
      </div>
    </div>
  </li>
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="shadow">
      <div class="card-header" id="heading1">
        <h3>
          <button class="btn btn-link">Accordion 1</button>
        </h3>
      </div>
      <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
        <div class="card-body">contents
        </div>
      </div>
    </div>
  </li>
</ul>

To see this fix in action, check out your codepen here: https://codepen.io/anon/pen/gQWywr?editors=0100

Answer №2

Instead of extending its body, the second element is following the height parameters set by the grid. To resolve this issue, simply transfer the shadow effect from the li element to the card-body element within #faq-accordion .card-faq. Upon testing, I observed that the body remains collapsed while the shadow effect on the li element creates a visual illusion. By the way, I have made some adjustments to your code.

Answer №3

If you're looking for a solution, consider utilizing multiple divs with a float property:

<html>
<head>
    <style>
        .content {
            float:left;
        }
    </style>
</head>
<body>
    <div class="content"><!--Place your content for the first column here--></div>
    <div class="content"><!--Place your content for the second column here--></div>
</body>
</html>

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

PHPWord setup complication

I am struggling to run a PHPWord script. When attempting to execute the sample example Text.php, it does not display anything. I have verified that the class is loading successfully. You can find more information in the documentation. If anyone has encou ...

phphtmlms-worddoc

Creating unique buttons for your PHP poll

I am designing a website for my friend and myself. The main feature of our site is a poll that asks users to choose between two options. Currently, I have set the input type as radio buttons where users can click on a circle to make their selection. Howeve ...

phphtml

Resetting the check status in html can be accomplished by using the checked

I am currently working on a popup feature in HTML <div id="term_flags" class="term_flags"> <div class="modal-users-content flagsContent"> <div class="modal-users-header"> <span class="close" ng-clic ...

htmlangularjs

HTML table with scroll feature displays gaps between consecutive rows

I've created a scrolling table with some header line spacing showing up when scrolled. Do you know how to hide it? Check out this Codepen example Here's the HTML structure: <div class="table-container"> <table class=" ...

htmlcsshtml-tablescroll

Leveraging reframe.js to enhance the functionality of HTML5 video playback

I'm struggling with using the reframe.js plugin on a page that includes HTML5 embedded video. When I try to use my own video file from the same folder, it doesn't work as expected. While everything seems to be working in terms of the page loadin ...

javascriptjqueryhtml

What is the best way to zoom in on an image and make it move off the screen as I scroll through my webpage?

I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While ...

javascriptjqueryhtmlcss

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Why isn't the video div sliding down and displaying properly in the beginning? Any ideas on how to fix it? Here is the snippet of HTML code and JavaScript: <!DOCTYPE HTML> <html> <head> <title>Team Songs</title> <link ...

javascriptjqueryhtmlcss

HTML - Toggle visibility of div using display property

I'm currently working on implementing a show and hide functionality for a div. I followed a tutorial from a website called w3schools, but the way they implemented it is different from what I'm looking to achieve. In their example, the div is init ...

htmlcssdisplay

Error: Attempting to assign value to the 'innerHTML' property of null in a Wordle clone with local storage

While developing a Wordle-inspired game for my website, I decided to utilize Local Storage to store the user's progress. Everything seemed to be working smoothly until an unexpected error occurred: "Uncaught TypeError: Cannot set properties of null (s ...

javascripthtmltypeerrorgetelementbyid

Is there a way to make text within a Div selectable even if it is positioned behind another Div with a higher z-index?

Currently grappling with some code, unfortunately cannot easily paste the problematic part here as I am unsure of its exact location. Here's the situation: there is a div containing text that needs to be selectable, however, there is another div with ...

jqueryhtmlcss

Prevent your HTML tables from overflowing

I am attempting to create an HTML table with three columns, where I want the first and third columns to have a width of "auto" based on their content. The middle column should then take up the remaining space. While this setup works well when the content ...

htmlcsshtml-table

Can you affix a tag to the picture?

Currently, I have a static page located at . However, I am planning to dynamically generate this page by retrieving data from a database. My challenge lies in assigning a position ID obtained from the database to each of the tyres on the page. Any sugges ...

phphtml

The Datatable fails to render the JSON data

Currently, I am dynamically binding a DataTable from a JSON URL and also generating headers dynamically. However, I am facing some issues in passing the JSON data to aaData in the DataTable. Can you please take a look at my code snippet below and provide m ...

javascriptjqueryhtmldatatable

Transforming Form Input Fields into a Nested JSON Format with the Power of JQuery

I'm facing a challenge in converting the input fields below into a nested JSON file structure in my HTML page. Despite trying various methods, I haven't been successful yet. These inputs are retrieved through AngularJS ng-repeat. Any assistance o ...

javascriptjqueryhtmljsonangularjs

Omit child DIV element in JavaScript and the Document Object Model

I have a situation with two div elements. One is <div class="card" id="openWebsite"> and the other is a sub-division <div class="card__btn"> Here's the issue: When someone clicks on the main div, they get red ...

javascripthtmljquerydomselectors-api

Adding content to a text field and then moving to the next line

I am looking to add a string to a text area, followed by a new line. After conducting some research, here are the methods I have attempted so far but without success: function appendString(str){ document.getElementById('output').value += st ...

javascripthtml

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

htmlcsstwitter-bootstrap-3

Enhance Your Search Input: Adding an Icon Before Placeholder Text in Material Design

I am currently facing an issue where the placeholder text is overlapping the icon in the code below. I need to have the placeholder text indented to the right of the icon. Is there a more efficient way to include both an icon and a placeholder text in a ...

htmlangularformsmaterial-designplaceholder

Why doesn't jQuery UI's addClass method animate visibility like it should?

One of the advantageous features of jQuery UI is its enhancement of the jQuery addClass method, which enables animation by including a second parameter for 'duration', as shown below: $('div').addClass('someclass', 1000); Th ...

cssjquery-ui

What are the steps to designing a Vertical Curve UI?

Is there a way to replicate the unique vertical curve on the login page, as shown in the image below? I've come across horizontal SVGs that can achieve this effect, but I'm struggling to find resources on implementing it vertically. How is this ...

htmlcssuser-interfaceuser-experience