Click to hide working in reverse

Hi,

I have been trying to implement some click to Hide/Show Columns code and have had some success achieving what I wanted to do with javascript, I didn’t write the code, it was something I found online and slightly modified, I am no coder, just a self taught club webmaster.

I am getting mixed results and it is driving me crazy, on my initial test page, I just added some random table contents and I’m able to either hide or show particular columns using the “checked” state in the drop down selector.

However the actual page that I want to apply it to, has the table data injected by javascript from a Google Docs spreadsheet and it for some reason works in reverse.

It doesn’t matter whether it is “checked” or not, all columns show initially and are hidden when the check box is clicked, to either check or uncheck it.

Below is the script I am using

$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

Link to the page I want to use it on:

Test Page

In the drop down on this page there are 4 checked and 2 unchecked options, but all are showing initially and all behave the same when clicked.

The link below is to the initial page I made with the table data actually on the page and that works as it should, ie 1 column is hidden on page load and can be toggled to show or hide it, outside of the table being actually on the page and not injected there is no real difference.

Original Test page

Hoping someone can point out what I am doing wrong, I suspect it may be a clash between different JS

My apologies for some of the content on one of the page links

Kindest Regards
Bam Bam

Just solved this myself and I can’t believe all it took was to hide the 2 columns with a bit of css, it now works exactly as it should.

1 Like

Great job figuring it out… Sorry we didn’t help you much :frowning: