Expand the specific column that is selected with just a click of the mouse

Question

Expand the specific column that is selected with just a click of the mouse

I am currently working with a layout featuring three columns that utilizes bootstrap. However, I have encountered an issue where clicking on one column results in the expansion of the adjacent columns as well. Unfortunately, I am unable to display the snippet code here, so I have provided an image showcasing the problem: https://i.sstatic.net/1aE2Q.png

I am seeking guidance on how to alter this behavior. My goal is to click on a single column and have only that specific column expand without affecting the others. Any suggestions on how I can achieve this?

$('li.submenu a[href="#"]').click(
  function(e) {
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-4').toggleClass('flex-last');
    return false;
  });

ul.ul_submenu {
  display: none;
}

.submenu a i {
  transition: ease .3s;
}

.submenu a.open i {
  transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
     // Column 1 content...
     // Column 2 content...
     // Column 3 content...
     // Additional columns...
  </div>
</div>😉

javascript html css bootstrap-4

Answer 1

Answer №1

The Bootstrap grid system utilizes Flexbox (I highly recommend learning more about it if you haven't already). Your current HTML structure is set up in a way that each row serves as an integral unit, enclosed within a div.row. You have created a single-line row consisting of three columns. When one of the child elements (in this case, your ul submenu) within the div.row expands, it doesn't just expand its siblings but enlarges the containing div (div.row). This expansion of the containing block pushes down the subsequent div.row, and this behavior cannot be altered due to the nature of how it works.

In order to achieve the desired functionality mentioned in your question, I suggest considering a different HTML structure: construct three columns, each comprising multiple rows. Here's a functional example below (execute in full-page mode). Please note that there might be some implications on the vertical stacking order, although it's likely not a significant issue.

$('li.submenu a[href="#"]').click(
  function(e) {
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-3').toggleClass('flex-last');
    return false;
  });

ul.ul_submenu {
  display: none;
}

.submenu a i {
  transition: ease .3s;
}

.submenu a.open i {
  transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="col-md-4">
    <div class="row">
      // Additional HTML code blocks
    </div>
    <div class="row">
      // Additional HTML code blocks
    </div>
    <div class="row">
      // Additional HTML code blocks
    </div>
  </div>
  // Additional column structures here
</div>

Answer 2

The Bootstrap grid system utilizes Flexbox (I highly recommend learning more about it if you haven't already). Your current HTML structure is set up in a way that each row serves as an integral unit, enclosed within a div.row. You have created a single-line row consisting of three columns. When one of the child elements (in this case, your ul submenu) within the div.row expands, it doesn't just expand its siblings but enlarges the containing div (div.row). This expansion of the containing block pushes down the subsequent div.row, and this behavior cannot be altered due to the nature of how it works.

In order to achieve the desired functionality mentioned in your question, I suggest considering a different HTML structure: construct three columns, each comprising multiple rows. Here's a functional example below (execute in full-page mode). Please note that there might be some implications on the vertical stacking order, although it's likely not a significant issue.

$('li.submenu a[href="#"]').click(
  function(e) {
    e.preventDefault();
    $(this).toggleClass('open');
    $(this).next().toggle();
    $('.col-md-3').toggleClass('flex-last');
    return false;
  });

ul.ul_submenu {
  display: none;
}

.submenu a i {
  transition: ease .3s;
}

.submenu a.open i {
  transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="col-md-4">
    <div class="row">
      // Additional HTML code blocks
    </div>
    <div class="row">
      // Additional HTML code blocks
    </div>
    <div class="row">
      // Additional HTML code blocks
    </div>
  </div>
  // Additional column structures here
</div>

Answer 3

Answer №2

Utilizing indexing allows you to pinpoint the specific element you wish to manipulate:

let selectedElement = $(".yourClass")[0];

This code snippet will target the first element with the specified class, and you can adjust the index accordingly for other elements!

Answer 4

Utilizing indexing allows you to pinpoint the specific element you wish to manipulate:

let selectedElement = $(".yourClass")[0];

This code snippet will target the first element with the specified class, and you can adjust the index accordingly for other elements!

Answer 5

Answer №3

After reviewing the code provided, it appears that the potential error lies within this specific line:

$('.col-md-3').toggleClass('flex-last');

Essentially, this line targets all elements with the class col-md-3 and toggles the class flex-last for each of these elements (as per your explanation).

To refine this behavior and only affect the parent elements of the clicked element, you can modify the code as follows:

$(this).parents('.col-md-3').toggleClass('flex-last');

Answer 6

After reviewing the code provided, it appears that the potential error lies within this specific line:

$('.col-md-3').toggleClass('flex-last');

Essentially, this line targets all elements with the class col-md-3 and toggles the class flex-last for each of these elements (as per your explanation).

To refine this behavior and only affect the parent elements of the clicked element, you can modify the code as follows:

$(this).parents('.col-md-3').toggleClass('flex-last');

Expand the specific column that is selected with just a click of the mouse

Answer №1

Answer №2

Answer №3

Similar questions

Using jQuery to Extract Data from an External JSON Source

Preventing div resizing in AngularJS through scroll functionality

I am having issues with my JavaScript code, I could really use some assistance

The JavaScript else statement is failing to execute as intended

How can I ensure that all the text is always in lowercase in my Angular project?

Can the DNS cached entry in Firefox be updated and changed?

What is the process of linking this JavaScript code to an outer stylesheet and integrating it with the HTML document?

Ways to position a button in the center of an image

i am trying to execute a function in an angularjs controller through html, but the scope variable that i am

Issue with submitting the form... Pressing the Enter key

The combination of useEffect and Client component has the power to greatly

Exploring the capabilities of HTML5's file API along with Octokit.js to work with

Understanding how types intersect in TypeScript

The attribute "value" for Material-UI autocomplete cannot be used in conjunction with the "getOptionLabel" attribute

Map does not provide zero padding for strings, whereas forEach does

Utilizing AJAX for fetching a partial view

Setting a global variable in the JavaScript code below

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

Rearrange the position of an element within an array

What is causing the CSS loader to continue showing up even after all the items have finished loading?