Items expand and move seamlessly between two columns

Question

Items expand and move seamlessly between two columns

My website features a Bootstrap accordion that I have organized into a two-column layout using the following CSS:


#accordion {
  column-count: 2;
}

.card {
  margin: 0px 20px 20px 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
a{
  display:block;
}

The issue arises when expanding items in the second column. Some items in the first column jump back, especially on pages with a larger number of items, making it difficult for users to interact with them effectively.

I opted for the two-column layout due to the dynamic nature of the content generated by PHP, which can vary in the number of accordions and items.

Is there a solution to prevent these jumping behavior when expanding items across columns?

javascript jquery html css bootstrap-4

Answer 1

Answer №1

Consider utilizing the appropriate bootstrap functionality, like the class="row" and column classes (for example, "col-sm-6")... as shown below:

#accordion {
  column-count: 2;
}

.card {
  margin: 0px 20px 20px 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
a{
  display:block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="accordion" class="row">
  <div class="col-sm-6">
  
    <div class="card">
      <div class="card-header" id="heading1">
        <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
      </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    // more card elements with similar structure ...
  </div>
  <div class="col-sm-6">
    // more card elements with similar structure ...
  </div>
</div>

Answer 2

Consider utilizing the appropriate bootstrap functionality, like the class="row" and column classes (for example, "col-sm-6")... as shown below:

#accordion {
  column-count: 2;
}

.card {
  margin: 0px 20px 20px 20px;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
a{
  display:block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div id="accordion" class="row">
  <div class="col-sm-6">
  
    <div class="card">
      <div class="card-header" id="heading1">
        <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
      </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
          <a href="#">item1</a>
          <a href="#">item2</a>
          <a href="#">item3</a>
          <a href="#">item4</a>
        </div>
      </div>
    </div>
    // more card elements with similar structure ...
  </div>
  <div class="col-sm-6">
    // more card elements with similar structure ...
  </div>
</div>

Answer 3

Answer №2

Follow these steps to achieve the desired layout: Start by creating a new div with the class "row" and add the "col-md-6" class to all the cards as shown below.

<div class="row">
   <div class col-md-6>
      <div class="card ">
        <div class="card-header" id="heading1">
             <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
        </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
         <a href="#">item1</a>
         <a href="#">item2</a>
         <a href="#">item3</a>
         <a href="#">item4</a>
        </div>
      </div>
   </div>
   <div class col-md-6>
     <div class="card">
       <div class="card-header" id="heading2">
           <button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
       </div>
       <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
          <div class="card-body">
              <a href="#">item1</a>
              <a href="#">item2</a>
              <a href="#">item3</a>
              <a href="#">item4</a>
          </div>
        </div>
      </div>
    </div>
</div>

Make sure to repeat this code for every pair of buttons.

Answer 4

Follow these steps to achieve the desired layout: Start by creating a new div with the class "row" and add the "col-md-6" class to all the cards as shown below.

<div class="row">
   <div class col-md-6>
      <div class="card ">
        <div class="card-header" id="heading1">
             <button class="btn" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Heading1</button>
        </div>
      <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion">
        <div class="card-body">
         <a href="#">item1</a>
         <a href="#">item2</a>
         <a href="#">item3</a>
         <a href="#">item4</a>
        </div>
      </div>
   </div>
   <div class col-md-6>
     <div class="card">
       <div class="card-header" id="heading2">
           <button class="btn" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Heading2</button>
       </div>
       <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
          <div class="card-body">
              <a href="#">item1</a>
              <a href="#">item2</a>
              <a href="#">item3</a>
              <a href="#">item4</a>
          </div>
        </div>
      </div>
    </div>
</div>

Make sure to repeat this code for every pair of buttons.

Answer 5

Answer №3

I resolved the issue by making changes to PHP code generation instead of following the suggestion to add each item to a new row. Here's what I did:

$i =0;
$sql = "SELECT * FROM headings";
$stmt = DB::run($sql);

$count = $stmt->rowCount();
$half_count = ceil($count/2);

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $i++;

    if($i==1 || $i==$half_count+1){
        $headings .= '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-5 mb-5">';
        $headings .= '<div id="accordion" class="index_accordion">';
    }

    // original code continuation

    if($i==$half_count || $i==$count){
        $headings .= '</div>';
        $headings .= '</div>';
    }
}

Now, the issue is that it functions as two separate accordions, allowing items to be expanded on both sides.

Answer 6

I resolved the issue by making changes to PHP code generation instead of following the suggestion to add each item to a new row. Here's what I did:

$i =0;
$sql = "SELECT * FROM headings";
$stmt = DB::run($sql);

$count = $stmt->rowCount();
$half_count = ceil($count/2);

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $i++;

    if($i==1 || $i==$half_count+1){
        $headings .= '<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-5 mb-5">';
        $headings .= '<div id="accordion" class="index_accordion">';
    }

    // original code continuation

    if($i==$half_count || $i==$count){
        $headings .= '</div>';
        $headings .= '</div>';
    }
}

Now, the issue is that it functions as two separate accordions, allowing items to be expanded on both sides.

Items expand and move seamlessly between two columns

Answer №1

Answer №2

Answer №3

Similar questions

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

IE is causing issues with the transition

Using HTML and jQuery to create a table with buttons to add or remove rows is a common practice. However, there

When a click event triggers the list to close, an incorrect element

Issue with NodeJS: The HTTP GET request is returning the code instead of the expected JSON object

When using the ngFor directive, the select tag with ngModel does not correctly select options based on the specified

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

Transform geojson data into an HTML table

Customizing div elements in various RMarkdown documents with a CSS file

jQuery refusing to delete class

What is the best way to trigger a sound to play once when the document is loaded?

Arranging Data in a Table using Tabs and JavaScript

The React JSON Unhandled Rejection problem requires immediate attention

access the ckeditor within the frame

The child directive has the ability to interact with every parent directive

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Completing the regex properly

Defeat the all-powerful !important tag and enable dialog customization for positioning

Problems with Searching in Bootstrap Tables

You need to click the form submit image twice in order to make it work