My bootstrap responsive table has a unique functionality that allows specific divs to expand and collapse upon button click. While this feature works seamlessly in desktop view, it encounters issues on mobile devices.
CSS
.expandClass[aria-expanded=true] .fa-chevron-circle-right {
display: none;
}
.expandClass[aria-expanded=false] .fa-chevron-circle-down {
display: none;
}
html
<table id="respTableId" class="table table-striped table-bordered table-responsive"
style="width: 100%;">
<thead>
<tr>
<th style="width:50%;">Column 1</th>
<th style="width:50%">Column2</th>
</tr>
</thead>
<tr>
<td>data1</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId1" role="button"
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId1">
Test Data 1
</div>
</td>
<td>data2</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId2" role="button"
aria-expanded="false" aria-controls="collapseId2">
Click to View / Hide
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId2">
Test Data 2
</div>
</td>
<td>data3</td>
<td> <a class="expandClass" data-toggle="collapse" href="#collapseId3" role="button"
aria-expanded="false" aria-controls="collapseId3">
Click to View / Hide
<i class="fa fa-chevron-circle-right" style="font-size:1.5em;"></i>
<i class="fa fa-chevron-circle-down" style="font-size:1.5em;"></i>
</a>
<div class="collapse" id="collapseId3">
Test Data 3
</div>
</td>
</tr>
</table>
While the above code functions correctly on desktops, I am facing challenges with its behavior on mobile devices. I have attempted an alternative approach using the following javascript code, but the issue persists.
Javascript
function showHideDiv(id)
{
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}