Using bootstrap 5, I've successfully created a list view:
<div class="col">
Click to switch to grid/list
</div>
Below is the content list:
<div class="row mt-3 list">
list view
...
.....
.......
</div>
And here I have the content grid:
<div class="row mt-3 grid d-none">
grid view
...
.....
.......
</div>
The list view is set as default.
Could someone assist me in toggling between grid and list views by clicking on Click to switch to grid/list? It should remove the 'd-none' class from the grid tag and add it to the list tag when clicked.
I attempted the following approach:
<button onclick="myFunction()">Click to switch to grid/list</button>
<script>
function myFunction() {
document.getElementById("box").style.display = "none";
}
</script>
Unfortunately, this method did not work for me as intended and I was unable to achieve the desired effect of toggling between grid and list views. I have reviewed various questions and answers but have not found a solution that fits my needs or can be implemented in my scenario.