Code list and grid chuyển qua lại cơ bản nhưng chưa phân trang

Code HTML

<section>
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Collections</h2>
      <div class="button-group button-group--collapse">
        <button class="button button--icon-only" data-control="list">
          <svg viewBox="0 0 512 512" width="100" title="list">
            <path d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
          </svg>
        </button>
        <button class="button button--icon-only active" data-control="grid">
          <svg viewBox="0 0 512 512" width="100" title="th-large">
            <path d="M296 32h192c13.255 0 24 10.745 24 24v160c0 13.255-10.745 24-24 24H296c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24zm-80 0H24C10.745 32 0 42.745 0 56v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zM0 296v160c0 13.255 10.745 24 24 24h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm296 184h192c13.255 0 24-10.745 24-24V296c0-13.255-10.745-24-24-24H296c-13.255 0-24 10.745-24 24v160c0 13.255 10.745 24 24 24z" />
          </svg>
        </button>
      </div>
    </div>
    <ul role="list" class="cards" id="cards" data-layout="grid">
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1617791160588-241658c0f566?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjQ0ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>Abstraction</h3>
            <p>Let your mind wander</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1613336026275-d6d473084e85?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjg0NDB8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>Coffee time</h3>
            <p>Enjoy your time</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1488240339625-c4014e114224?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjg1NDZ8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>Practice makes perfect</h3>
            <p>But, it takes time</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1527856263669-12c3a0af2aa6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjg2MjV8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>Life is good</h3>
            <p>Trust me...</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjg3NzB8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>I love reading</h3>
            <p>Do you?</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
      <li>
        <div class="card">
          <div class="card__img-wrapper">
            <img class="card__img" src="https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODYyMjg2OTN8&ixlib=rb-4.0.3&q=80&w=400" alt="">
          </div>
          <div class="card__content">
            <h3>Windows vs Mac</h3>
            <p>Any Linux user?</p>
            <a href="#" class="button">Start</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>

<h2 class="section-title">Collections</h2>

</svg>

</button>

</svg>

</button>

</div>

<li>

</div>

<h3>Abstraction</h3>

<p>Let your mind wander</p>

<a href="#" class="button">Start</a>

</div>

</li>

<li>

</div>

<h3>Coffee time</h3>

<p>Enjoy your time</p>

<a href="#" class="button">Start</a>

</div>

</li>

<li>

</div>

<h3>Practice makes perfect</h3>

<p>But, it takes time</p>

<a href="#" class="button">Start</a>

</div>

</li>

<li>

</div>

<p>Trust me...</p>

<a href="#" class="button">Start</a>

</div>

</li>

<li>

</div>

<h3>I love reading</h3>

<a href="#" class="button">Start</a>

</div>

</li>

<li>

</div>

<h3>Windows vs Mac</h3>

<p>Any Linux user?</p>

<a href="#" class="button">Start</a>

</div>

</li>

</ul>

</div>

</section>

Code CSS

/*tool page công cụ hỗ trợ miễn phí*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  font-family: 'Rubik', sans-serif;
  margin: 0;
  background-color: #f1f1f1;
  font-size: 1rem;
  padding-block: 2rem;
}

ul:where([role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

section {
  padding-block: clamp(2rem, 5vw, 3rem);
}

button,
input,
select,
textarea {
  font: inherit;
}

svg {
  height: 2.5ex;
  width: auto;
  flex: none;
  fill: currentColor;
}

.container {
  width: min(100% - 2rem, 63em);
  margin-inline: auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.section-header * {
  margin: 0;
}

.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cards {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.cards[data-layout="list"] {
  grid-template-columns: 1fr;
}

.card {
  width: min(100%, 20rem);
  margin-inline: auto;
  background-color: #fff;
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 0.2);
}

.card__content {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.cards[data-layout="list"] .card {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: stretch;
}

.cards[data-layout="list"] .card__content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-content: space-between;
}

@media (width < 40em) {
  .cards[data-layout="list"] .card {
    grid-template-columns: 1fr 3fr;
  }
  
  .cards[data-layout="list"] .card__content {
    grid-template-columns: 1fr;
  }
}

.card * {
  margin: 0;
}

.card__img-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__content h3 {
  text-transform: capitalize;
}

.button-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.button-group--collapse {
  gap: 0;
  border-radius: 0.25em;
  overflow: hidden;
  width: fit-content;
}

.button-group--collapse > .button {
  border-radius: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  padding: 0.5em 1.5em;
  border-radius: 0.25em;
  border: 0;
  
  text-decoration: none;
  background-color: #1b2435;
  color: #fff;
  transition: background-color 250ms ease;
}

.button:is(:hover, :focus-visible) {
  background-color: #8600bb;
  color: #fff;
}

.button:active {
  scale: 0.97;
}

.button--icon-only {
  padding: 0.5em;
  background-color: #fff;
  color: #1b2435;
}

.button.active {
  background-color: #8600bb;
  color: #fff;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

/*tool page công cụ hỗ trợ miễn phí*/

*::before,

*::after {

box-sizing: border-box;

}

body {

font-family: 'Rubik', sans-serif;

margin: 0;

background-color: #f1f1f1;

font-size: 1rem;

padding-block: 2rem;

}

ul:where([role="list"]) {

list-style: none;

margin: 0;

padding: 0;

}

img {

max-width: 100%;

display: block;

}

section {

padding-block: clamp(2rem, 5vw, 3rem);

}

button,

input,

select,

textarea {

font: inherit;

}

svg {

height: 2.5ex;

width: auto;

flex: none;

fill: currentColor;

}

.container {

width: min(100% - 2rem, 63em);

margin-inline: auto;

}

.section-header {

display: flex;

justify-content: space-between;

align-items: center;

gap: 1rem;

}

.section-header * {

margin: 0;

}

.section-title {

font-size: clamp(1.5rem, 3vw, 2rem);

}

.cards {

display: grid;

grid-template-columns:

repeat(auto-fit, minmax(min(20rem, 100%), 1fr));

gap: 1.5rem;

padding-block: 1.5rem;

}

.cards[data-layout="list"] {

grid-template-columns: 1fr;

}

.card {

width: min(100%, 20rem);

margin-inline: auto;

background-color: #fff;

border-radius: 0.5em;

overflow: hidden;

box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 0.2);

}

.card__content {

display: grid;

gap: 1rem;

padding: 1rem;

}

.cards[data-layout="list"] .card {

width: 100%;

display: grid;

grid-template-columns: 100px 1fr;

align-items: stretch;

}

.cards[data-layout="list"] .card__content {

display: grid;

grid-template-columns: auto 1fr auto;

align-items: center;

justify-content: space-between;

}

@media (width < 40em) {

.cards[data-layout="list"] .card {

grid-template-columns: 1fr 3fr;

}

.cards[data-layout="list"] .card__content {

grid-template-columns: 1fr;

}

.card * {

margin: 0;

}

.card__img-wrapper {

width: 100%;

aspect-ratio: 16 / 9;

overflow: hidden;

}

.card__img {

width: 100%;

height: 100%;

object-fit: cover;

}

.card__content h3 {

text-transform: capitalize;

}

.button-group {

display: flex;

align-items: center;

gap: 0.5em;

}

.button-group--collapse {

gap: 0;

border-radius: 0.25em;

overflow: hidden;

width: fit-content;

}

.button-group--collapse > .button {

border-radius: 0;

}

.button {

display: inline-flex;

align-items: center;

justify-content: center;

padding: 0.5em 1.5em;

border-radius: 0.25em;

border: 0;

text-decoration: none;

background-color: #1b2435;

color: #fff;

transition: background-color 250ms ease;

}

.button:is(:hover, :focus-visible) {

background-color: #8600bb;

color: #fff;

}

.button:active {

scale: 0.97;

}

.button--icon-only {

padding: 0.5em;

background-color: #fff;

color: #1b2435;

}

.button.active {

background-color: #8600bb;

color: #fff;

}

Code JS

document.addEventListener("DOMContentLoaded", function() {
    const layoutControllerBtns = document.querySelectorAll("[data-control]");
    const cardsElem = document.getElementById("cards");

    layoutControllerBtns.forEach(btn => {
        btn.addEventListener("click", (e) => {
            const layoutControl = e.currentTarget.dataset.control;
            cardsElem.setAttribute("data-layout", layoutControl);
            
            // Loại bỏ lớp 'active' từ tất cả các nút
            layoutControllerBtns.forEach(btn => btn.classList.remove("active"));
            
            // Thêm lớp 'active' cho nút đang được click
            e.currentTarget.classList.add("active");
        });
    });
});

document.addEventListener("DOMContentLoaded", function() {

const layoutControllerBtns = document.querySelectorAll("[data-control]");

const cardsElem = document.getElementById("cards");

layoutControllerBtns.forEach(btn => {

btn.addEventListener("click", (e) => {

const layoutControl = e.currentTarget.dataset.control;

cardsElem.setAttribute("data-layout", layoutControl);

// Loại bỏ lớp 'active' từ tất cả các nút

layoutControllerBtns.forEach(btn => btn.classList.remove("active"));

// Thêm lớp 'active' cho nút đang được click

e.currentTarget.classList.add("active");

});

Add code khai báo add vào wordpress function css và js để chỉ áp dụng với page cần dùng duy nhất để tránh xung đột Js và CSS

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

0989 589 077

Code list and grid chuyển qua lại cơ bản nhưng chưa phân trang

Ngôi Nhà Web

My Account

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai kinh doanh đa kênh

Duy trì 24h liên tụcchăm sóc khách hàng

Hệ thống độc quyền hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ đối tác thành viên

Mở đầu chiến lược

Quản lý vận hành

Kế hoạch nội dung

Công nghệ hệ thống

Booking triển khai kinh doanh đa kênh

Duy trì 24h liên tụcchăm sóc khách hàng

Hệ thống độc quyền hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ đối tác thành viên

0989 589 077

Ngôi Nhà Web

Related articles

My Account

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên

Booking triển khai
kinh doanh đa kênh

Duy trì 24h liên tục
chăm sóc khách hàng

Hệ thống độc quyền
hỗ trợ hợp tác liên kết

Hệ thống hỗ trợ
đối tác thành viên