Skip to content
Advertisement

How to change the values of colSpan with toggle buttons

I have total of 7 buttons which toggle hide and show of columns. For example, if button 1 is pressed once it will hide column 1 and if button 1 is again pressed it will show column 1 and the rest 6 buttons perform the same operation.

But is it possible that if I click any one button from the 7 buttons it will change the colspan of a heading cell from 15 to 13, if any 2 buttons are clicked it will then change the colspan to 11 and if any 3 buttons are clicked it will then change the colspan to 9. It works fine till colspan 9, but after that it changes to colspan 8 rather than colspan 7. How can I fix this?

  • if any one button is clicked colspan should be 13
  • if any two buttons is clicked colspan should be 11
  • if any three buttons is clicked colspan should be 9
  • if any four buttons is clicked colspan should be 7
  • if any five buttons is clicked colspan should be 5
  • if any six buttons is clicked colspan should be 3
  • if any seven buttons is clicked colspan should be 1

Note: the state of the buttons needs to remain the same even upon page refresh.

Fiddle Link

JavaScript
JavaScript
JavaScript

Advertisement

Answer

JavaScript

i have made some change when i added comment //colspan condition please check

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement