The functionality of Jquery to update the display styling using CSS is not functioning properly

Question

The functionality of Jquery to update the display styling using CSS is not functioning properly

Here is the code snippet:

<script type="text/javascript>
    $(window).load(function(){
            debugger
            $('#comp').ready(function() {
                $('#QV101').css("display", "inline");
                $('#QV102').css("display", "none");
                $('#QV103').css("display", "none");
            });

            $('#comp').on('click', function(event) {
                debugger
                $('#QV101').css("display", "inline");
                $('#QV102').css("display", "none");
                $('#QV103').css("display", "none");  
            });
            $('#mes').on('click', function(event) {
                debugger
                $('#QV101').css("display", "none");
                $('#QV102').css("display", "inline");
                $('#QV103').css("display", "none");

            });
            $('#hora').on('click', function(event) {
                debugger
                $('#QV102').css("display", "none");
                $('#QV101').css("display", "none");
                $('#QV103').css("display", "inline");

            });
            debugger

        });
</script>

The issue I am facing is that when I click on other buttons, such as 'mes' or 'hora', the elements do not display despite the CSS changes being reflected in the web console. I prefer to avoid using 'hidden' as it creates an unsightly gap on the screen.

The HTML code contains values like #QV... which are related to Qlik and display a chart.

Comparativa Consumo mes consumo hora Consumo dia

                <div id="QV101" class="col-md-12 qvobject">    
                </div>
                <div id="QV102" class="col-md-12 qvobject">       
                </div>
                <div id="QV103" class="col-md-12 qvobject">

                </div>

            </div>



            <div class="row">
                <div id="QV114" class="col-md-2 qvplaceholder">

                </div>
                <div id="QV115" class="col-md-2 qvplaceholder">

                </div>
                <div id="QV117" class="col-md-2 qvplaceholder">

                </div>

            </div>
        </div>
    </div>

Thank you!

jquery css display

Answer 1

Answer №1

$('#QV101').addClass('show');
$('#QV101').siblings(':not(button)').addClass('hide')



$('#comp').on('click', function(event) {
  $('#QV101').siblings(':not(button)').removeClass('show');
  $('#QV101').addClass('show');
  $('#QV101').siblings(':not(button)').addClass('hide');
});
$('#mes').on('click', function(event) {
  $('#QV102').siblings(':not(button)').removeClass('show');
  $('#QV102').addClass('show');
  $('#QV102').siblings(':not(button)').addClass('hide');
});
$('#hora').on('click', function(event) {
  $('#QV103').siblings(':not(button)').removeClass('show');
  $('#QV103').addClass('show');
  $('#QV103').siblings(':not(button)').addClass('hide');

});

.hide {
  display: none
}
.show {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QV101">1</div>
<div id="QV102">2</div>
<div id="QV103">3</div>


<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>

integrated :not(button) to exclude buttons (also can utilize sibling(div))
utilize .siblings() to retrieve all div elements.
modify the class attribute based on the button that is clicked.

Answer 2

$('#QV101').addClass('show');
$('#QV101').siblings(':not(button)').addClass('hide')



$('#comp').on('click', function(event) {
  $('#QV101').siblings(':not(button)').removeClass('show');
  $('#QV101').addClass('show');
  $('#QV101').siblings(':not(button)').addClass('hide');
});
$('#mes').on('click', function(event) {
  $('#QV102').siblings(':not(button)').removeClass('show');
  $('#QV102').addClass('show');
  $('#QV102').siblings(':not(button)').addClass('hide');
});
$('#hora').on('click', function(event) {
  $('#QV103').siblings(':not(button)').removeClass('show');
  $('#QV103').addClass('show');
  $('#QV103').siblings(':not(button)').addClass('hide');

});

.hide {
  display: none
}
.show {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QV101">1</div>
<div id="QV102">2</div>
<div id="QV103">3</div>


<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>

integrated :not(button) to exclude buttons (also can utilize sibling(div))
utilize .siblings() to retrieve all div elements.
modify the class attribute based on the button that is clicked.

Answer 3

Answer №2

Here is my recommended approach that streamlines the code and makes it easier to maintain as outlined in the comments above. You can find the JSFiddle link below:

Below is the updated code snippet:

$(function(){

    $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });

  $('#comp').on('click', function(event) {
    $('.toggleDiv').hide();
    $('#QV101').css("display", "inline");    
  });
  $('#mes').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV102').css("display", "inline");
  });
  $('#hora').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV103').css("display", "inline");
  });

});

Click here for the Working Fiddle

Answer 4

Here is my recommended approach that streamlines the code and makes it easier to maintain as outlined in the comments above. You can find the JSFiddle link below:

Below is the updated code snippet:

$(function(){

    $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });

  $('#comp').on('click', function(event) {
    $('.toggleDiv').hide();
    $('#QV101').css("display", "inline");    
  });
  $('#mes').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV102').css("display", "inline");
  });
  $('#hora').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV103').css("display", "inline");
  });

});

Click here for the Working Fiddle

Answer 5

Answer №3

Check out this code snippet to see if your code is functioning correctly:

$(window).load(function(){
  debugger
  $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });
  $('#comp').on('click', function(event) {
    debugger
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");  
  });
  $('#mes').on('click', function(event) {
    debugger
    $('#QV101').css("display", "none");
    $('#QV102').css("display", "inline");
    $('#QV103').css("display", "none");

  });
  $('#hora').on('click', function(event) {
    debugger
    $('#QV102').css("display", "none");
    $('#QV101').css("display", "none");
    $('#QV103').css("display", "inline");

  });
  debugger
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>
<div id="QV101">QV101</div>
<div id="QV102">QV102</div>
<div id="QV103">QV103</div>

<script type="text/javascript">

</script>

Answer 6

Check out this code snippet to see if your code is functioning correctly:

$(window).load(function(){
  debugger
  $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });
  $('#comp').on('click', function(event) {
    debugger
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");  
  });
  $('#mes').on('click', function(event) {
    debugger
    $('#QV101').css("display", "none");
    $('#QV102').css("display", "inline");
    $('#QV103').css("display", "none");

  });
  $('#hora').on('click', function(event) {
    debugger
    $('#QV102').css("display", "none");
    $('#QV101').css("display", "none");
    $('#QV103').css("display", "inline");

  });
  debugger
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>
<div id="QV101">QV101</div>
<div id="QV102">QV102</div>
<div id="QV103">QV103</div>

<script type="text/javascript">

</script>

Answer 7

Answer №4

I managed to find a solution for the issue. Below is the code snippet that helped me resolve it:

<script type="text/javascript">
$(window).load(function(){
debugger

 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");

$('#comp').on('click', function(event) {
 debugger
 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");  
});
$('#mes').on('click', function(event) {
debugger
 $('#QV101').css("display", "none");
 $('#QV102').css("display", "inline");
 $('#QV103').css("display", "none");

});
$('#hora').on('click', function(event) {
debugger
 $('#QV102').css("display", "none");
 $('#QV101').css("display", "none");
 $('#QV103').css("display", "inline");

});
debugger
});
    </script>

The issue I encountered was related to the Qlik chart not displaying initially but only after scrolling down a bit. This specific chart was created outside of the Qlik app, and that seemed to be causing the delay in rendering.

I appreciate all the assistance provided so far!

Answer 8

I managed to find a solution for the issue. Below is the code snippet that helped me resolve it:

<script type="text/javascript">
$(window).load(function(){
debugger

 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");

$('#comp').on('click', function(event) {
 debugger
 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");  
});
$('#mes').on('click', function(event) {
debugger
 $('#QV101').css("display", "none");
 $('#QV102').css("display", "inline");
 $('#QV103').css("display", "none");

});
$('#hora').on('click', function(event) {
debugger
 $('#QV102').css("display", "none");
 $('#QV101').css("display", "none");
 $('#QV103').css("display", "inline");

});
debugger
});
    </script>

The issue I encountered was related to the Qlik chart not displaying initially but only after scrolling down a bit. This specific chart was created outside of the Qlik app, and that seemed to be causing the delay in rendering.

I appreciate all the assistance provided so far!

The functionality of Jquery to update the display styling using CSS is not functioning properly

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to show a background image behind the heading text?

Changing the date format for the week view feature on the calendar

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

Choose a Range of DOM Elements

Resize the shape of an image's polygon

Fade In and Contemplate CSS, Not Effective

Choosing groupings of courses

Manipulate the hover effect of an element using jQuery

Inheriting the viewBox attribute with SvgIcon

Showing NaN/NaN when no results were found in jQuery DataTables

Is there a way to prevent special characters from being typed without affecting the arrow keys?

Utilizing JSON data for Autocomplete with Ajax and Jquery

I need assistance with displaying this array either using CSS styling or in table format. Can someone please

New jQuery div elements do not have animations when using $(document).on

I am having trouble viewing elements located below a div that I created using CSS

Using jQuery: What is the best way to implement form validation in jQuery before submitting?

Discovering every row in a table's <tbody> section through the power of jQuery

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Enhance the functionality of jQueryUI sortable by enabling scrolling and incorporating a delay specifically for mobile

Arranging particular placement