Conceal table columns on an HTML page using CSS styling

HTML:

<table class="list qy">
 <tr>
  <td>cell1</td>
  <td class="q">cell2</td>
  <td>cell3</td>
  <td class="y">cell4</td>
 </tr>
</table>

CSS:

table.qy td.q, table.qy td.y { display: none; }

JS:

function toggleQY(b) {
 $("table.list").toggleClass("qy")
}

It's more efficient than using JavaScript to hide all TD elements individually ($("table.list td.q,table.list td.y")...), however, it doesn't work in Internet Explorer versions 8 and 9.

It seems that the class is added to the table, but the table does not refresh...

I'm at a loss for solutions (((

P.S. Please excuse any mistakes in my English

jqueryhtmlcss

Answer №1

If your goal is simply to switch the visibility of the element, you have the option to utilize the .toggle() method.

$('table.list').find('.q, .y').toggle()

Answer №2

Do you need to initially hide certain columns and then reveal them by clicking on the table? If so, consider implementing the following solution:

To hide specific columns using CSS from the start:

.table .column1,
.table .column2 {
  display: none;
}

If you want to toggle these hidden columns upon clicking on the table, use this jQuery code:

$(function() {
  $('table.list').on("click", function(){
    $(this).find('.column1, .column2').toggle();
  });  
})

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

Efficiently managing multiple database updates with PHP and JQuery

Having trouble processing multiple mySQL updates simultaneously? I have 4 select/option boxes fetching data from a db table and I want to update the database onChange using JQuery. It's working with one select module, but adding more causes issues. Th ...

javascriptphpjquerymysqlforms

Should the max-height transition be set from 0 to automatically adjust or to none?

I'm dealing with an element that has a max-height of 0, and I want to smoothly transition it to either no max-height, auto, or none; essentially allowing it to expand based on the number of elements inside. I prefer not to use JavaScript or flex at th ...

csscss-transitions

An easy guide on implementing the if control statement within a Jinja2 embedded HTML document

Utilizing parsehub, I have successfully scraped a list of movie names and exported it to an html file using a python script. However, my intention is to only display titles that contain the word "The" by implementing an if statement. The code structure app ...

pythonhtmldjangoparsehub

An innovative countdown clock for WooCommerce that dynamically displays delivery time as a customizable shortcode

After successfully creating a Wordpress shortcode with a JavaScript counter, I encountered an issue: Back End - Counter functions properly: https://i.stack.imgur.com/qyHIL.png Front End - Counter not working (no console errors...): https://i.stack.imgu ...

javascriptphpjquerywordpresswoocommerce

Is it possible to return PHP parser errors as JSON data?

I am facing an issue with my HTML page that uses a JQuery Ajax call to communicate with a PHP page and expects a JSON response. If the PHP encounters a parser error, it sends back the error message but not in the expected JSON format. This leads to a "JSON ...

phpjqueryajax

Instructions on separating an array into two table rows "<tr>" with a single foreach loop on the template side

Given the constraints of my working environment, I must divide this array into two separate table rows - one containing half of the data and the other with the remaining half. The array is already sorted in the order that I require: Array ( [product] ...

phphtmlarraysforeachhtml-table

Managing browser back button functionality

I've been struggling to find a solution for handling the browser back button event. I would like to prompt the user with a "confirm box" if they click on the browser back button. If they choose 'ok', I need to allow the back button action, ...

javascriptjqueryhtmlbrowser

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

htmljsonrestsymfonytwig

What is the best way to combine two JavaScript functions into a single function, especially when the selector and function to be invoked may differ?

In the provided snippet, I am using the following function callers: // del if ( maxDelivery > 0 ) { if ( maxDelivery === 1 ){ delAdressFunc( dels ); } else { for ( i = 0; i < maxDelivery; i += 1 ){ delAdressFunc( ...

javascriptjqueryfunctionoptimization

Is it possible to run a JavaScript script from any location?

Currently, I am diving into a Javascript script and in order to run it seamlessly from any webpage I am browsing, I am thinking of adding a button to my bookmarks or using an extension. To be honest, I am clueless about the process and despite doing some ...

javascriptjquery

Loading a local FBX file in Three.js without the need to upload it

When attempting to load files selected by users in an HTML input, I encountered a problem with the loader expecting a URL in Linux style. I have tried various methods such as using a blob as a URL object, providing raw data to the FBX loader, and even usin ...

javascripthtmlthree.js

Tips for aligning content vertically within a header:

I'm currently working on creating a responsive header with two columns. My goal is to have the button in the right column vertically centered. I am aware of the method for centering items using 'top: 50%; margin-top: -xy px', but my button ...

htmlcss

Why do confirm or alert boxes in Safari on Windows require a double click?

I'm currently working on a simple JavaScript example where I want to display an alert box when an HTML button is clicked in SAFARI. However, I've noticed that it requires a double click to make the alert disappear from the screen. Does anyone ha ...

javascripthtml

Center alignment is not possible for the Div element

Problem Every time I attempt to implement the following code (outlined below), the div only appears centered when using width: 100px;. <div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; mar ...

javascripthtmlcsscenter

Navigation bar with dropdown functionality that adjusts its width based on the content inside

Need help with a CSS dropdown menu issue on my WordPress site. The contents of the submenus are too wide, even after setting a static width for them. I'm looking for a way to make the submenu width adjust dynamically based on the title length. Any exp ...

cssnavigation

Struggling to eliminate the underlines from an HTML hyperlink

Can someone help me figure out how to remove the annoying underline link that pops up when hovering over an a element in HTML? I attempted adding a style="text-decoration: none" attribute to the a link, but the underline persists when I hover over the text ...

htmlcss

Passing a variable to a different PHP script

I'm facing a dilemma and need some assistance. I'm encountering an issue where a PHP variable (or JavaScript/jQuery) is not being successfully transmitted to another PHP file through an AJAX request that I set up. To provide context, I am in the ...

javascriptphpjqueryajax

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

Looking to display a submenu next to its parent element

I have a list that is not in order: <ul> <li>Parent-1 <ul> <li>Child-1</li> <li>Child-2</li> <li>Child-3</li> </ul> </li> <li>Parent-2 <ul> <li>Ch ...

jqueryhtmlcssmenu

Creating dynamic visual effects for text on image with animation

I have created an animation where an image transitions from black and white to colored upon hover, accompanied by overlay text. However, when hovering over the text, the image reverts back to black and white. How can I ensure that the image stays in color ...

htmlcsstwitter-bootstrap