Issue
<section class="section table-section">
<div class="table-container">
<div class="table-header">
<div
class="d-flex align-items-center justify-content-between py-3 px-3"
>
<div class="d-flex align-items-center">
<i class="fa-solid fa-list-ul p-2"></i>
<i class="iconsax p-2" icon-name="grid-apps"></i>
</div>
<div>
<i class="iconsax p-2" icon-name="arrow-up-down"></i>
</div>
</div>
</div>
<table class="table"> ...
I have a table view here. There are 2 icons in the header on the table. One of them is the list icon and the other is the grid icon.
<section class="section grid-section">
<div class="table-container">
<div class="table-header">
<div
class="d-flex align-items-center justify-content-between py-3 px-3"
>
<div class="d-flex align-items-center">
<i class="fa-solid fa-list-ul p-2"></i>
<i class="iconsax p-2" icon-name="grid-apps"></i>
</div>
<div>
<i class="iconsax p-2" icon-name="arrow-up-down"></i>
</div>
</div>
</div>
<div class="d-flex">
<div class="col-4 card-grid"> ...
Here, I have a grid-shaped layout, there are three grid elements side by side that I called with col-4. The same header as above is here too.
.grid-section {
padding: 1rem 3rem 1rem 3rem;
display: none;
}
grid-section's css.
.table-section {
padding: 1rem 3rem 1rem 3rem;
display: block;
}
table-section's css.
Here, when the page is first opened, I say show only the table, not the Grid-view.
<script>
document.addEventListener("DOMContentLoaded", function () {
// Get the list icon and grid icon elements
var listIcon = document.querySelector(".fa-solid.fa-list-ul");
var gridIcon = document.querySelector(
".iconsax[icon-name='grid-apps']"
);
// Add a click event listener to the list icon
listIcon.addEventListener("click", function () {
// Show the table view and hide the grid view
document.querySelector(".table-section").style.display = "block";
document.querySelector(".grid-section").style.display = "none";
});
// Add a click event listener to the grid icon
gridIcon.addEventListener("click", function () {
// Show the grid view and hide the table view
document.querySelector(".table-section").style.display = "none";
document.querySelector(".grid-section").style.display = "block";
});
});
</script>
Finally, in the script, if the first icon is clicked, i.e. the icon with class .fa-solid.fa-list-ul, I say show the grid view. If the second icon is clicked, i.e. the class .iconsax[icon-name='grid-apps'], I say show the grid view. . When I click on the grid icon, I can get grid view. But it doesn't click on the list icon again. I can't switch back to list view.
Solution
The reason why this isn't working is, You have two instances of same html header containing list and grid icon. When you add event listener, it adds to only the first found list and grid icons.
The quick way to fix this is to add event listener to all the list and grid icons.
document.addEventListener("DOMContentLoaded", function() {
// Get the list icon and grid icon elements
var listIcons = document.querySelectorAll(".fa-solid.fa-list-ul");
var gridIcons = document.querySelectorAll(
".iconsax[icon-name='grid-apps']"
);
// Add a click event listener to the list icon
Array.from(listIcons).forEach(function(listIcon) {
listIcon.addEventListener("click", function() {
// Show the table view and hide the grid view
document.querySelector(".table-section").style.display = "block";
document.querySelector(".grid-section").style.display = "none";
});
});
Array.from(gridIcons).forEach(function(gridIcon) {
gridIcon.addEventListener("click", function() {
// Show the grid view and hide the table view
document.querySelector(".table-section").style.display = "none";
document.querySelector(".grid-section").style.display = "block";
});
});
});
Ideal way is, you should have only one instance of header.
Answered By - CodeThing
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.