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

Modify the properties of an element based on another

Situation : I am facing a challenge where I need to adjust two components based on a click event. The function linked to the onclick event handleChange includes a prop 'text'. Each time the onclick event is triggered, I must modify the value of t ...

javascriptreactjsmaterial-uirenderconditional-operator

Ways to retrieve JSON objects from the Controller using ajax

Currently, I am developing a mail validation controller using jQuery AJAX and PHP. Once the message is validated in the PHP controller, I attempt to retrieve it using AJAX and display it on the screen using jQuery. Here is an excerpt of my AJAX code: .. ...

jqueryajaxjson

Generating divs dynamically with inline styling and utilizing ngFor, while incorporating a conditional check with ngIf in Angular

Currently, I have an Angular component where I am dynamically generating div elements using the ngFor directive. However, I also need to validate a condition before creating each div, and I'm facing challenges when trying to use both ngFor and ngIf in ...

htmlcssangular

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Currently, I am tackling a project that involves generating sub domains dynamically based on the prefixes entered by users on my website. While everything is functioning properly on my localhost using diet.js and express-subdomain, errors are being encount ...

javascriptangularjsnode.jsamazon-web-servicessubdomain

Is it possible to have a <small> element nested within an HTML5 heading such as h1, h2, h3, etc?

I am curious about the proper way to structure headings in HTML5. Can I include a <small> element within an <h3> tag? For example: <h3>Payment details <small>(this is your default card)</small></h3> ...

htmlw3c

Displaying Wordpress posts in various columns

Typically, I enjoy solving problems on my own, but I have hit a roadblock with this one and haven't been able to find a solution online. I am wondering if there is a way in WordPress to choose which column a post (with its thumbnail) appears in. For e ...

jquerywordpress

What is the best way to locate the position of a different element within ReactJS?

Within my parent element, I have two child elements. The second child has the capability to be dragged into the first child. Upon successful drag and drop into the first child, a callback function will be triggered. What is the best way for me to determi ...

javascriptreactjs

Retrieving a numeric attribute from a JSON structure

Recently, I encountered an issue with a PHP multidimensional array that I converted to JSON using JSON_encode(). Since I am working with Drupal, the arrays often contain keys that look like this: $some_array['und']['0']['value&a ...

phpjavascriptjqueryjson

a dedicated TypeScript interface for a particular JSON schema

I am pondering, how can I generate a TypeScript interface for JSON data like this: "Cities": { "NY": ["New York", [8000, 134]], "LA": ["Los Angeles", [4000, 97]], } I'm uncertain about how to handle these nested arrays and u ...

javascriptjsontypescriptinterface

Tips for avoiding a large <ul> element from spilling over the body in a flexbox design

I struggled to articulate the problem I am facing, and I apologize if it's still unclear So, in my app, I have 3 cards, and the 2 side ones contain lists (<ul>) that can become quite lengthy. I want the scrollbar to appear on the <ul> its ...

htmlcssflexbox

Navigating through a nested array within a JSON object using Vue.js - a guide

I have a JSON data array that includes outer and inner subarrays. My goal is to loop through both levels and create a table. Below you'll find a snippet of the sample array: { class:'I', subDdiv:[ { ...

javascriptloopsvue.jsvuejs2element-ui

Clicking on the images will display full page versions

Apologies for not making an attempt just yet, but I'm struggling to locate what I need. Here's the menu structure in question: <div class="overlay-navigation"> <nav role="navigation"> <ul class="test"> & ...

jqueryhtmlcss

What could be the reason for the onmessage listener not handling the initial SSE event?

When a client connects to a Node Express server, it creates a new EventSource. The server sends an SSE event upon initial connection and then at a 30-second interval thereafter. Strangely, the client's onmessage handler does not respond to the initial ...

javascriptnode.jsexpressnginxserver-sent-events

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

Deciphering the occurrence of jQuery-Mobile page firing events: the mystery behind dialog pages appearing upon closure

I'm still fairly new to jQuery-Mobile and I'm trying to wrap my head around what exactly happens when a page or dialog is loaded. To help illustrate the confusion I'm experiencing, I put together a small collection of files that showcase th ...

javascriptjqueryjquery-mobiledialog

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

javascripthtmliframefullscreen

What is the process for linking dynamic content to document-ready events?

When it comes to jQuery and JavaScript, I admittedly struggle a bit. I have a specific question but can't seem to find the right search terms to get me there. It involves using either .trigger() or on(), but I'm unsure of the correct implementati ...

javascriptjqueryajax

Loop through the elements retrieved by the `getElementsByName` method in

My goal is to access each node by elementName using the following JavaScript code: function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att ...

javascriptjqueryhtmlxmlxslt

VueJS Array Index causing unexpected output

I have been developing a unique poetry application that pulls in poetry using an API call. To fetch the data, I am utilizing the axios library and using v-for to render the data. The index from v-for is used to load the image for each respective poem. My ...

javascriptvue.jsaxios

I cannot locate the dropdown list anywhere

As a beginner in html and css, I decided to follow a tutorial on youtube. The tutorial focuses on creating a navigation bar with dropdown menus using html and css. I wanted the names Ria, Kezia, and Gelia to be displayed when hovering my mouse over the Su ...

htmlcss