For my latest project, I'm designing a bootstrap webpage with a 4-column grid layout. The twist is that two of these columns will initially be hidden - one on the left and the other on the right. By clicking a toggle button on the left, the user can reveal 3 columns; similarly, clicking a toggle button on the right will display all 4 columns.
Any tips on how to set this up using Bootstrap's grid system?
The main idea behind this code snippet is that upon triggering a .click() event, the following actions are taken:
col-lg-* are removed based on the number of columns with the class .hidden..hidden class.col-lg-* class is added based on the count of columns with the class .hidden.HTML
<p>
<button class="btn btn-info toggle-item toggle-first">Toggle first column</button>
<button class="btn btn-info toggle-item toggle-last">Toggle last column</button>
</p>
<div class="row">
<div class="first column hidden">
first column
</div>
<div class="column col-lg-6">
second column
</div>
<div class="column col-lg-6">
third column
</div>
<div class="last column hidden">
fourth column
</div>
</div>
JavaScript
jQuery('.toggle-item').click(function() {
var count = jQuery('.column.hidden').length;
if (count === 2) {
jQuery('.column').removeClass('col-lg-6');
} else if (count === 1) {
jQuery('.column').removeClass('col-lg-4');
} else if (count === 0) {
jQuery('.column').removeClass('col-lg-3');
}
if (jQuery(this).hasClass('toggle-first')) {
jQuery('.column.first').toggleClass('hidden');
} else {
jQuery('.column.last').toggleClass('hidden');
}
count = jQuery('.column.hidden').length;
if (count === 2) {
jQuery('.column').addClass('col-lg-6');
} else if (count === 1) {
jQuery('.column').addClass('col-lg-4');
} else if (count === 0) {
jQuery('.column').addClass('col-lg-3');
}
});
For a live demonstration of this functionality, you can visit this demo link.
Here is my approach using both JQuery and Bootstrap frameworks. I decided to include an orange border to enhance visibility (though it can be easily removed if desired)
Code
$(function() {
$(".btn-primary").on('click', function() {
$(".first-col").toggle();
updateColumnWidth($(".col:visible").length);
});
$(".btn-danger").on('click', function() {
$(".last-col").toggle();
updateColumnWidth($(".col:visible").length);
});
var updateColumnWidth = function(numOfColumns) {
$(".col").removeClass('col-xs-3 col-xs-4 col-xs-6');
switch (numOfColumns) {
case 2:
$(".col").addClass('col-xs-6');
break;
case 3:
$(".col").addClass('col-xs-4');
break;
case 4:
$(".col").addClass('col-xs-3');
break;
}
}
});.col-xs-3, .col-xs-4, .col-xs-6 {
border: 1px solid orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row well">
<div class="col col-xs-3 first-col">
col 1
</div>
<div class="col col-xs-3">
col 2
</div>
<div class="col col-xs-3">
col 3
</div>
<div class="col col-xs-3 last-col">
col 4
</div>
</div>
<button class="btn btn-primary">Show/Hide Col 1</button>
<button class="btn btn-danger">Show/Hide Col 4</button>On my practice website, I have set up a demonstration for showcasing text data. The issue arises when the user inserts an excessive amount of characters in the text box. To address this, I would like the text to be scrollable so that all content can be d ...
Greetings! I am currently working on my website www.acigaiabeta.esy.es and I am facing an issue with aligning the images of the carousel to the center vertically. Despite trying various solutions, such as following tips from this resource, the images remai ...
This is the HTML code snippet I am working with: <li class="treeview" id="account_management"> I need to select the element with the id of "account_management" and update its class from "treeview" to "treeview active" in order to ...
I need assistance as I am facing an issue where all files are not appearing at the same time. It seems that the problem lies with the year option in my code. The year option requires at least one year to be chosen for it to work properly. I want to impleme ...
My Bootstrap-card is currently not adjusting its width properly. I want the card to occupy the full width of the column it's in. Below is a snippet of my code and a screenshot showing the current width along with the desired width indicated by a blue ...
I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...
Here is the code I wrote to check if a username exists in the database using Ajax. However, I am facing an issue where the input text from the HTML page is not being sent to the checkusername.php file via $_POST['uname'];. I have tried multiple s ...
I attempted to convert a decimal number to a whole number and encountered an issue. When using the angular pipe method {{myNumber | number: '1.0-0.'}}, it provides a rounded off value instead of the floor value. For example, with number = 3.8, ...
Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...
I'm struggling to automate the selection of a specific element on this webpage using Selenium in Python. The elements I'm targeting from the webpage are as follows: https://i.sstatic.net/d4xcH.png Upon inspecting the page element, I found this ...
Is there a simple method to convert an 8-bit grayscale JPEG from Canvas using client side technologies in a web browser (such as HTML5, canvas, WebGL, and JavaScript)? Are there any pre-made JavaScript libraries available for use, without requiring extens ...
I originally had a conventional form submission page with form validation JavaScript that was functioning properly. After switching the page to submit via AJAX, the form validation is no longer being triggered. How can I integrate the two methods to ensu ...
I am currently working with the datatable library and I am trying to display all rows when a separate button is tapped. I have attempted multiple methods, but none seem to be working for me. Here is a snippet of my code: if (val != '') { $( ...
Does anyone know how to display a Bootstrap bottom pophover when an image button is clicked using JavaScript? Appreciate any help! ...
list.innerHTML = ` <p id="text" class="text">${toDoItem.task}</p> <div id="taskListBtn"> <span id="button-tick-${toDoItem.id}" class="material-icons tick-style">check_circle</span> <span id="button-edit- ...
I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...
I need some help with a coding issue I'm facing. I have a form where one of the inputs is connected to a JavaScript function that updates a div on the page as the user types. However, I want to limit the width of this div to 900px and make sure it onl ...
When I have content loaded via Ajax with two divs and a list, my goal is to console.log which div I was typing on when clicking on a list item. However, the issue I'm facing is that I always get the first one I clicked until I refresh the page. Altho ...
I need help redirecting to a new page when the current page is loaded. My website is built using jQuery mobile in combination with WorkLight. Index.html: <body> <div data-role="importpages" id="pageport"> </div> </body> ...
How to display Bootstrap Modal in the first click when using html5Mode(true). When clicking on launch demo modal, the URL changes to /#myModal upon the 1st click but the modal does not appear. The modal only appears upon clicking launch demo modal again. ...