Brief: In Mobile Screen Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using javascript/jquery. How ?
Details: I have a website using php, html, css & javascript and one of the backend pages contain a table with three rows Class Names, Student Names & Absent Dates. when select a specific class from Class Names list it will display Student Names list for that class and when select a specific student name it will display a list of Absent Dates for that student. This is work fine on PC screen but for mobile it will be much hard to view those info because of small screen so the idea here i would like to select a specific class from Class Names list in order to slide ( navigate ) than hide this column and display the next one which is Student Names list column and when select a specific student name it will slide ( navigate ) than hide this column and display the next one which is Absent Dates list Also i can go back by adding back button at top of the table So i need an explanation how i can achieve that using javascript/jquery and provide an example will be much better to understand. please ?
Current Page table structure:
<div class="panel-body blocking"><div class="row"><div class="col-lg-4 manage-at__scroll" style="padding:0px;"><table class="table table-striped table-bordered table-hover"><tbody><tr><th class="text-left">Class Names</th></tr><tr class="odd gradeX"><td class="text-left"><a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a></td></tr></tbody></table></div><div class="col-lg-4 manage-at__scroll" style="padding:0px;"><table class="table table-striped table-bordered table-hover"><tbody><tr><th class="text-left">Student Names</th></tr><tr class="odd gradeX"><td class="text-left"><a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a></td></tr></tbody></table></div><div class="col-lg-4 manage-at__scroll" style="padding:0px;"><table class="table table-striped table-bordered table-hover" id="student_attendance"><tbody><tr><th class="text-center">Absent Dates</th></tr><tr class="gradeX odd"><td align="center"><p class="text-left"><strong>Actual Absent Dates List</strong></p><p class="text-left"></p></td></tr><tr><td><p class="text-left"><input type="text"></p></td></tr></tbody></table></div></div></div>