Increase the size of the grid system column upon clicking on a Bootstrap icon

I am using Google Maps in a tab with Bootstrap, but the map is too small. I would like to change the Bootstrap grid system when I click on a FontAwesome icon: the first column should turn into col-md-8, and the second column should become col-md-4.

Here is my code:

<h2 class="block-title">Mapas Brasil</h1>
    <div class="row">
        <div class="col-md-6">
            <ul class="nav nav-tabs nav-cptec">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
                </li>
            </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="menu1" role="tabpanel">
            <div id="map-canvas"></div>
        </div>
        <div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
        <div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
    </div>


<div class="col-md-6">
    <ul class="nav nav-tabs nav-justified nav-cptec">
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
        </li>
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
        </li>
        <li class="nav-item">
            <a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="menu-1" role="tabpanel">
            <img src="/images/sinotica.png" alt="" class="img-fluid">
        </div>
        <div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
        <div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
    </div>
    <img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
  </div>
</div>
javascriptjqueryhtmlcssbootstrap-4

Answer №1

$('#open').click(function() {
    $('#content').removeClass('col-md-6').addClass('col-md-8 active'); 
    $('#sidebar').removeClass('col-md-6').addClass('col-md-4'); 
});

$('body').click(function(event){
    //Check if click is outside #open AND is "active"
    if($(event.target).closest('#open').length==0 && $('#open').hasClass('active')){
        $('#content').addClass('col-md-6').removeClass('col-md-8 active'); 
        $('#sidebar').addClass('col-md-6').removeClass('col-md-4'); 
    }
});

This code should work as intended. It reverses the action performed when clicking on the targeted element by listening for clicks on the body and checking whether they are inside or outside the specified element before triggering the appropriate action.

Make sure that other click handlers on your page do not stop event bubbling to ensure that clicks outside the element are always detected...

Answer №2

After making changes to the code by switching the column from col-md-6 to col-md-4, I noticed that it does not revert back when I click out. The JavaScript remains the same as what you provided.

This is my updated code:

<div class="row">
    <div id="teste" class="col-md-6">
        <ul class="nav nav-tabs nav-cptec">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Current Condition</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Warning</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperatures</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="menu1" role="tabpanel">
                <i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
            </div>
            <div id="map-canvas"></div>
        </div>
        <div class="tab-pane" id="menu2" role="tabpanel">Warning</div>
        <div class="tab-pane" id="menu3" role="tabpanel">Temperatures</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

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

What is the best way to obtain the value of a radio button using ajax?

Here is the search button in my PHP file. I am unsure of how to connect the radio button to the JavaScript file. <button id="submit">Search</button> This is the starting point in the JavaScript file var xhr = new XMLHttpRequest(); f ...

javascriptphphtmlajaxxml

Is there a way to integrate AJAX response Successful JSON data into a jQuery Datatable?

I am attempting to incorporate JSON data into a Datatable that I receive from an AJAX post Response. However, my current process is not functioning properly. Can anyone provide any suggestions or tips? Here is my AJAX code: $.ajax({ method: "POST", ...

jqueryjsonajaxdatatabledatatables

Axios encounters CORS issues, while fetch operates smoothly

After going through various questions on CORS errors to no avail, I am facing a dilemma in my NuxtJS client application. Whenever I try to make a simple POST request using axios, I encounter CORS issues. However, when I switch to using the fetch API, every ...

javascriptrestvue.jscorsnuxt.js

In what scenarios is it most beneficial to utilize an isolate scope in Angular?

The AngularJS guide states that the isolate scope of a directive isolates everything except models explicitly added to the scope: {} hash object. This is useful for building reusable components because it prevents unintended changes to your model state, al ...

javascriptangularjsangularjs-directive

What is the best method to extract individual data values from ul li tags using PHP?

As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...

phphtmlxpathdomdocument

``There seems to be an issue with the redirect header function in the PHP

Setting up my test site on a local host, I included an ajax request in one of my java-script files to a php script. if(hIF == "true"){ $.ajax({ type: "POST", url: "log_in/login.php", data: {name: userName, pwd: password}, ...

javascriptphpajaxheader

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

jqueryhtmlcssjquery-mobile

Exploring the process of retrieving array elements from an AJAX response transmitted from PHP

Here is an example of jQuery code for an ajax function: $(document).ready(function() { $("#zip_code").keyup(function() { var el = $(this); var module_url = $('#module_url').val(); if (el.val().length === 5) { $.ajax({ ...

javascriptphpjqueryajaxajax-request

HTML code displaying a fixed message at the top of the webpage

I'm working on a web page that has a lot of content. I need to have a message always visible at the bottom of the browser window, even when scrolling. Can anyone help me achieve this using simple CSS, HTML, jQuery, or PHP? Thanks! ...

phpjavascriptjqueryhtmlcss

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

Can you advise on how to generate a key to access an environment.ts value within a *ngFor loop? Specifically, I am trying to locate keys that follow the pattern 'environment.{{region}}_couche_url' within the loop

I currently have a block of HTML code that is repeated multiple times. <!-- Metropolitan Map --> <div> <app-map [name] = "(( environment.metropole_name ))" [layer_url] = "(( environment.metropole_layer_url ))" ...

htmlangularngfor

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

Generating URL parameters for Ajax requests on the fly

My current project involves creating a dynamic form where the number of fields displayed changes based on the user's selection from a dropdown menu. This means that depending on what option they choose, anywhere from 2 to 20 different fields may be sh ...

javascriptjqueryjsonajax

Displaying Data in Table Using Ajax Request

I'm working on a project that involves creating an HTML table from an ajax request pulling SharePoint list items. The screenshot provided demonstrates how it functions and what it displays after the button is clicked. However, I am looking for a way t ...

javascripthtmljqueryajax

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

htmlcsshtml-table

What causes the alignment of text to be overridden by the presence of a floating element?

https://jsfiddle.net/u0Ltgh3e/68/ .text { width: 50%; text-align: justify; } I am currently developing a custom formatting tool for a specific purpose and I am attempting to create a two-column layout similar to the one demonstrated in this Jsfiddle l ...

javascripthtmlcss

Activating a switch to execute a PHP code that displays a JavaScript code

At the conclusion of the button's click event, the following JavaScript code is executed: xmlObj.open ('GET', /ajax.php, true); xmlObj.send (''); } This will trigger the php script ajax.php located in the root directory: <?ph ...

phpjavascriptxmlhttprequest

Unable to load page callback using NodeJS Express and Passport-facebook

I'm facing an issue with my Node.js application using Express for authentication via Facebook as the URL /auth/facebook/callback is not loading. Here are the dependencies versions: Express: 4.13.3 Passport: 0.3.0 Passport-facebook: 2.0.0 Below is th ...

javascriptnode.jsfacebookexpresspassport.js