What is the best way to dynamically add content to a grid item with Bootstrap and jQuery?

I am looking to design an HTML and CSS layout that displays items in rows, with each item expanding to load more content when clicked. Similar to the example shown below:

Desktop view grid:

The challenge arises in maintaining the layout for mobile viewing, which requires a different order of HTML elements:

Mobile view:

Currently, I have created this HTML code using Bootstrap CSS:

<div class="container">
    <div class="row">

        <div class="col-md-4 item">
            <a class="link" href="#emp_more_4" data-id="4">    
            </a>
        </div>

        ...

    </div;>

</div;>

The "emp_info" elements contain additional content for each item.

And here is the jQuery code snippet used:

        jQuery('.employees a').click(function() {
            var id = jQuery(this).data("id");
            jQuery('.employees .emp_info').hide();
            jQuery('.employees #emp_more_'+id).show();
        });

Although it successfully loads more content for each item, it disrupts the grid layout of columns and rows. Any suggestions on how to maintain the layout consistency for both desktop and mobile views are appreciated. I am open to exploring styling solutions without relying on Bootstrap classes if there are better alternatives.

jqueryhtmlcsstwitter-bootstrap

Answer №1

Here is a solution that may be helpful:

Please take a look at the following code snippet:

$(document).on('click', '.item a', function() {
$(".emp_info").width($('.row').width() - 30);
  $('.item').attr('style', '');
  $(this).closest('.item').css('margin-bottom', $(this).next().height());
    $('.emp_info').not($(this).next()).slideUp();
  $(this).next().slideToggle(function(){ 
  if($(this).is(':hidden')){
          $('.item').attr('style', '');
      }
  });
});
$(window).on('resize', function(){
   $(".emp_info").width($('.row').width() - 30);
});
.item a {
  height: 50px;
  background: #000;
  margin-bottom: 5px;
  display: block;
}

.item:nth-child(2) .emp_info {
  background-color: #ff0;
}

.item:nth-child(3) .emp_info {
  background-color: #eee;
}

.emp_info {
  background-color: #f00;
  margin-bottom: 10px;
  height: 50px;
  display: none;
  position: absolute;
  left: 15px;
}

.row {
  position: relative;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,

.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  position: static;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

    <div class="col-sm-4 item">
      <a class="link" href="#emp_more_4" data-id="1">
      </a>
      <div class="emp_info">
        <div class="emp_info_con">
        </div>
      </div>
    </div>

    <div class="col-sm-4 item">
      <a class="link" href="#emp_more_4" data-id="2">
      </a>
      <div class="emp_info">
        <div class="emp_info_con">
        </div>
      </div>
    </div>

    <div class="col-sm-4 item">
      <a class="link" href="#emp_more_4" data-id="3">
      </a>
      <div class="emp_info">
        <div class="emp_info_con">
        </div>
      </div>
    </div>


  </div>

  <div class="row">

    <div class="col-sm-4 item">
      <a class="link" href="#" data-id="4">
      </a>
      <div class="emp_info">
        <div class="emp_info_con">
        </div>
      </div>
    </div>

    <div class="col-sm-4 item">
      <a class="link" href="#" data-id="5">
      </a>
      <div class="emp_info">
        <div class="emp_info_con">
        </div>
      </div>
    
    </div>

  </div>
</div>

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

Is it possible to include og: meta information for Facebook after an Ajax load?

If you visit our website www.theshinebox.com, you'll notice that individual posts are loaded via AJAX. We want to make it possible to share or like these individual pages, but Facebook seems to be pulling information from the main page since it's ...

jqueryajaxfacebookmeta-tagsfacebook-opengraph

Tips for changing the width of a child element in CSS without impacting the parent's width

Here is the scenario: <div class="parent"> <div class="sizer" /> <div class="child" /> </div> .sizer { width: 200px; } .child { position: relative; width: 400px; } I am facing restrictions - I cannot explicitly set the width ...

htmlcss

Designing a personalized slider with the help of jQuery UI

I'm currently working on developing a unique slider with two handles using jQuery UI. However, I am facing an issue where the right handle is moving beyond the container boundaries. Upon analysis, I have identified that this issue stems from position ...

javascriptjqueryjquery-uiuser-interfaceslider

Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration. This is ...

htmlcsstwitter-bootstrapgridview

JavaScript triggering CSS animations to make elements flash and stand out

I am experiencing a peculiar issue with my mobile menu. It works smoothly when the window is resized to below 736px, and the toggle animation adds CSS classes to animate the menu in and out. However, after resizing the window, opening and closing the mobi ...

javascripthtmlcsscss-animations

Ensuring that the Twitter Bootstrap 2 fluid layout adjusts to the screen size with the addition of a scroll

I am currently working on implementing a new Bootstrap-based Design and have run into an issue. How can I create a fluid layout that fits the screen and only has one scrollable area for content? I have tried setting the height of body, html, and all paren ...

csslayouttwitter-bootstrapoverflow

Enhance your website with a dynamic navigation menu created with the power of html5

Currently in the process of designing a mobile website, I am facing a specific challenge. The homepage features menu items labeled 'a', 'b', 'c', ..., 'h'. My goal is to initially display only the first three menu it ...

htmlcssexpandable

Finding the Xpath for a checkbox element by identifying the label element following it based on its value

I've been putting in a lot of effort into this issue, but I haven't been able to find a specific answer on StackOverflow or figure it out myself through experimenting with Xpath. I'm still learning, so I apologize if this is a basic problem, ...

javahtmlseleniumxpathwicket

Using jQuery to animate a form submission in CodeIgniter

I have integrated two jQuery plugins into my application, which are: jQuery validate : . jQuery blockui : http://malsup.com/jquery/block/#download The application is developed using PHP Codeigniter and jQuery. It consists of a form created with the fol ...

javascriptphpjquerycodeigniter

Using jQuery to specifically extract the second value from a comma-separated list stored in a hidden input

I'm working with these input fields: <input class="things" type="hidden" value="FirstItem,SecondItem"/> <input class="things" type="hidden" value="FirstItem,SecondItem"/> Is there a way to extract only the second values from these input ...

javascriptjqueryhtml

Transform AngularJS into Angular through modifying the names of the directives and adjusting the framework to accommodate these new directives

I have a section of HTML code that includes AngularJS directives, and I am looking to convert it to Angular 8. Within my Angular project, I have created a custom component named destination. In the TypeScript file for this component, called destination.com ...

htmlangularjsangularangular8

Combining numerous words from a dataset using HTML and Javascript

I'm attempting to include a text from a button into a modal window. Currently, it is working; however, if the data consists of more than two words, only the first word is displayed. What am I doing incorrectly? ... <button type="submit" class="ob ...

javascriptjqueryhtmlhtml-dataset

An unusual occurrence involving JQ selectors and various variable labels

Looking to incorporate mouseover and mouseout functions into a series of classes, I decided to use jQuery selectors with variables in a loop: for(i=1; i<=2; i++){ cid = '.Cid'+i; ccid = '.CCid'+i; csid = '.CSid&apo ...

javascriptjquery

The error message "Uncaught TypeError: Unable to retrieve the 'lat' property of an undefined object when serializing leaflet data using $.param()" is displayed

Being a complete novice in JavaScript, I am experimenting with posting user location and map bounds using Leaflet and an AJAX call. While my event handler stateUpdater.onLocationFound successfully logs the user coordinates and map bounds, I encounter an is ...

javascriptjqueryajaxleaflet

What is the best way to calculate the sum of for-loop values in a Django template

Inside my Django template, I have a code snippet that looks like this: {% load mathfilters %} {% with total=0 %} {% for item in numbers %} {{ total | addition:item }} {% endfor %} {% endwith %} At the conclusion of this code, the total value remain ...

pythonhtmldjango

A sporadic glitch in IE10 appears while attempting to translate text with a border-radius feature

I need some advice regarding a rendering issue I am experiencing in IE10. I have created an animated-flip effect that works perfectly in all the browsers I need it to. However, during testing, I noticed random border-like lines appearing for no apparent re ...

htmlcssanimation

Is using Pushstate less effective than Hashbangs for caching purposes?

One of the benefits of using HTML5 Pushstate over hashbangs is that Google now encourages its use. The main disadvantage of Pushstate is that it is not supported by non-modern browsers. However, there seems to be a drawback when it comes to caching as well ...

ajaxhtmlbrowser-cachepushstatehashbang

changing CSS styles

I'm struggling with what seems like a simple issue and can't find a solution anywhere. The HTML element I have is <div class="box"> It originally has this rule in its stylesheet: .box { width: 40%; } My Custom CSS sheet overwrites the o ...

htmlcss

Sending the data-id attribute value to a controller function via ajax within the CodeIgniter framework

I have a button on my webpage with a data-id attribute. I am trying to send this data-id to a controller method in CodeIgniter using jQuery AJAX post method. Even though I do not have any form element, the AJAX request I made is not reaching the controller ...

phpjqueryajaxcodeigniter

There was an error in the syntax: a semicolon is missing before the statement

During an ajax request, I encountered this error and upon reviewing it thoroughly, I am unable to pinpoint the cause. The following code snippet is where the issue seems to lie: $('#post_submit').click(function() { var poster_id = <?php echo ...

javascriptjqueryajaxsyntax-error