How do I tweak a responsive table’s JavaScript to select a different column in mobile

Question

Here is my CodePen:

https://codepen.io/matbathome77/pen/KeEzZG

var pos = $(this).index()+2;

It is based on someone else's CodePen. How do I, in the mobile version, have it default to the “1 year” column, and show the content in that column.

Right now it is defaulted to 3 year and it isn't showing any content under that th until you select the item.

I tried editing the JS on line 4 to be +1 instead of +2, in hopes that this would change the default to 1 year. It didn't work.

Answer 1

Activate the column on the page load, and also on click. Move the onclick inline function to its own name, then call to it (with the li style updating) when it's clicked on.

from:

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

to

function loadColumn(pos) {
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
}

loadColumn(2);

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index() + 1;
  loadColumn(pos);
  $('li').removeClass('active');
  $(this).addClass('active');
});

is what you're looking for.

Here's the codepen: https://codepen.io/anon/pen/KeEXzR

Answer 2

I figured it out. I had to create an li and hide it. I had to also tell the javascript to call the third column, not the second. Thanks all.

https://codepen.io/matbathome77/pen/KeEzZG

<li class="hidden">Name (ticker)<br>Bla bla bla category</li>

and the css

li.hidden {display:none;}

finally, the javascript

loadColumn(3);