Home Web Design CSS CSS List and Grid View Switch With jQuery | List/Grid View Manage

CSS List and Grid View Switch With jQuery | List/Grid View Manage

October 22, 2019

11806

How we can create a list and grid switching layout using HTML CSS JavaScript? Solution: See this CSS List and Grid View Switch With jQuery, List/Grid View Manage.

Previously I have shared a fly to cart program, it is also related to eCommerce but it’s about switching grid and list view. Basically, the grid contains a square pattern type view and placed all items in the same pattern. And the list view is simple shows items as a list, Grid views are an alternative to standard list views.

Today you will learn to create a List/Grid View Manage program. Basically, there are some eCommerce products with their image, title, and description and an add to cart button which is visible on hover. On the top, there are two icons for the grid and list wise management, by clicking those you can switch the view of product placement. The grid view contains just a square image, title and price details, but the list view placed products list wise with image, title, price, and also with description.

So, Today I am sharing CSS List and Grid View Switch With jQuery. This program is mainly based on CSS, but jQuery handling here the toggle feature of this switching program. All the product images I have uploaded on this website and linked in the code, and also the grid and list icons are PNG images you also can use third-party icons.

If you are thinking now how this view management program actually is, then see the preview given below.

Preview Of Switch View Management

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/list-grid-view-switch.m4v?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS List and Grid View Switch With jQuery Source Code

Before sharing source code, let’s talk about it. First I have created a main div and placed list inside it, in a single list item I have placed an image, a title, description, and add to cart button using HTML. Also, I have placed two hyperlinks for putting list and grid icons. There I did not used any icon library, all the PNG images.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I put all the basic CSS stuff inside the file like size, margin, padding, color, display, etc. In the main div I gave a width value, for changing the view I increased the width and float none in the list view. Grid view contains only image and price because of less width size and floating.

jQuery handling here the toggle feature only, when you will click on the icons view will be changed. I have used jQuery here because of easy work and saving time, there are only 3-4 lines of JS codes (get). Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files, first for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com)-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Grid and List View | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="wrapper">
    <div class="view">
        <p>View as:</p>	
        <a href="#" class="icon-grid"></a>
	    <a href="#" class="icon-list"></a>
        
    </div>
    
    <div class="products category">
        <ul class="">
            <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/macbook.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	<a href="#">Macbook Air</a>
 <span>$ 1200.00</span>

                    <p class="des">Detailed item information</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </li>
            
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/msi.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	
                    <a href="#">MSI</a>
 <span>$ 800.00</span>

                    <p class="des">Detailed item information</p>
                    <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
                    
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/pavilion.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	
                    <a href="#">HP Pavilion</a>
 <span>$ 1000.00</span>

                    <p class="des">Detailed item information</p>
                    <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
   
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/predator.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	
                    <a href="#">Asus Predator</a>
 <span>$ 2500.00</span>

                    <p class="des">Detailed item information</p>
                    <p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>
  <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/surface.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	<a href="#">MS Surface Pro</a>
 <span>$ 1350.00</span>

                    <p class="des">Detailed item information</p>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </li>
             
 <li>
                <div class="itemIMG">
                    <img src="https://webdevtrick.com/wp-content/uploads/vivobook.jpg">
                    <div class="addCART"> <a href="#">+ Add To Cart</a> 
                    </div>
                </div>
                <div class="itemTitle">	
                    <a href="#">Vivobook</a>
 <span>$ 500.00</span>

                    <p class="des">Detailed item information</p>
                    <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </li>                
        </ul>
    </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<head>

<title>Grid and List View | Webdevtrick.com</title>

</head>

<body>

</div>

<li>

</div>

<div class="itemTitle"> <a href="#">Macbook Air</a>

<p class="des">Detailed item information</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

</li>

<li>

</div>

<p class="des">Detailed item information</p>

<p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</li>

<li>

</div>

<a href="#">HP Pavilion</a>

<p class="des">Detailed item information</p>

<p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</li>

<li>

</div>

<a href="#">Asus Predator</a>

<p class="des">Detailed item information</p>

<p>-60s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</li>

<li>

</div>

<div class="itemTitle"> <a href="#">MS Surface Pro</a>

<p class="des">Detailed item information</p>

</div>

</li>

<li>

</div>

<a href="#">Vivobook</a>

<p class="des">Detailed item information</p>

</div>

</li>

</ul>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com) */
* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/18px'OpenSans-Bold', sans-serif;    
}
ul {
    list-style: none;
}
.wrapper {
    width: 700px;
    margin: 20px auto;
}
.products {
    margin: 40px 0;
    overflow: hidden;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}
.products ul li p {
    display: none;
}
.products ul.list li p {
    display: block;
}
.products .list li {
    float: none;
    display: block;
    width: 691px;
    height: 245px;
}
.products .list li .itemTitle {
    float: left;
    position: relative;
    padding: 45px 0 20px 0;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
}
.products .list li:hover .itemTitle {
    border: 0;
}
.products .list li .itemTitle a {
    padding: 0 0 5px 0;
}
.products .list li .itemTitle .des {
    color: #333;
    text-transform: none !important;
    padding: 10px 0 0 0;
}
.products .list li .itemTitle p {
    color: #333;
    text-transform: none !important;
    width: 440px;
}
.products .list li .itemIMG {
    height: 243px;
    float: left;
    border-right: 1px solid #d9d9d9;
    margin: 0 13px 0 0;
    width: 230px;
    position: relative;
}
.products .list li .itemIMG img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.products .list li .addCART {
    height: 243px;
    border-bottom: 1px solid rgba(51, 51, 51, 1);
}
.products .list li .addCART a {
    margin: 45% auto auto 40px;
}
.products.catalog {
    margin: 80px auto 40px auto;
}
.products.category {
    margin: 10px 0;
    width: 693px;
    float: left;
}
.products ul li {
    float: left;
    margin: 0;
    padding: 0;
    width: 230px;
    height: 244px;
    position: relative;
    border-top: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
}
.products ul li img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.products ul li:hover .addCART, .products ul li:hover .addCART a {
    opacity: 1;
}
.products ul li:hover .itemTitle {
    border: 1px solid rgba(51, 51, 51, 1);
    border-top: 0;
}
.products ul li:hover .itemTitle a {
    color: #010101;
}
.addCART {
    position: absolute;
    top: 0;
    left: 0;
    width: 228px;
    height: 186px;
    border: 1px solid rgba(51, 51, 51, 1);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-transition: opacity 0s;
    -moz-transition: opacity 0s;
    -o-transition: opacity 0s;
}
.addCART a {
    text-decoration: none;
    display: inline-block;
    width: 157px;
    height: 40px;
    margin: 100px auto auto 40px;
    background-color: #333;
    text-align: center;
    font: 14px/40px'OpenSans-Italic', sans-serif;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}
.itemTitle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 208px;
    height: 36px;
    border: 1px solid rgba(51, 51, 51, 0);
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    border-top: 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.itemTitle p, .itemTitle span, .itemTitle a {
    text-transform: uppercase;
}
.itemTitle a {
    color: #003f75;
    text-decoration: none;
    display: block;
}
.itemTitle span {
    color: #a20000;
}
.view p  { top: 5px; margin: 0 10px 0 0; } 
.view p,
.view a { 
    float: left; 
    display: inline-block;
    text-decoration: none;
    position: relative;
}
.icon-grid {
    background: url("https://webdevtrick.com/wp-content/uploads/grid-view.png") no-repeat 0 0;
    height: 16px;
    width: 16px;
    top: 7px;
}
.icon-list {
    background: url("https://webdevtrick.com/wp-content/uploads/list-view.png") no-repeat 0 0;
    height: 32px;
    width: 32px;
}

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

186

187

188

189

190

/* Code By Webdevtrick ( https://webdevtrick.com) */

* {

margin: 0;

padding: 0;

}

body {

font: 14px/18px'OpenSans-Bold', sans-serif;

}

ul {

list-style: none;

}

.wrapper {

width: 700px;

margin: 20px auto;

}

.products {

margin: 40px 0;

overflow: hidden;

border-left: 1px solid #d9d9d9;

border-bottom: 1px solid #d9d9d9;

}

.products ul li p {

display: none;

}

.products ul.list li p {

display: block;

}

.products .list li {

float: none;

display: block;

width: 691px;

height: 245px;

}

.products .list li .itemTitle {

float: left;

position: relative;

padding: 45px 0 20px 0;

width: auto;

height: auto;

border: 0;

background: transparent;

}

.products .list li:hover .itemTitle {

border: 0;

}

.products .list li .itemTitle a {

padding: 0 0 5px 0;

}

.products .list li .itemTitle .des {

color: #333;

text-transform: none !important;

padding: 10px 0 0 0;

}

.products .list li .itemTitle p {

color: #333;

text-transform: none !important;

width: 440px;

}

.products .list li .itemIMG {

height: 243px;

float: left;

border-right: 1px solid #d9d9d9;

margin: 0 13px 0 0;

width: 230px;

position: relative;

}

.products .list li .itemIMG img {

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.products .list li .addCART {

height: 243px;

border-bottom: 1px solid rgba(51, 51, 51, 1);

}

.products .list li .addCART a {

margin: 45% auto auto 40px;

}

.products.catalog {

margin: 80px auto 40px auto;

}

.products.category {

margin: 10px 0;

width: 693px;

float: left;

}

.products ul li {

float: left;

margin: 0;

padding: 0;

width: 230px;

height: 244px;

position: relative;

border-top: 1px solid #d9d9d9;

border-right: 1px solid #d9d9d9;

}

.products ul li img {

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.products ul li:hover .addCART, .products ul li:hover .addCART a {

opacity: 1;

}

.products ul li:hover .itemTitle {

border: 1px solid rgba(51, 51, 51, 1);

border-top: 0;

}

.products ul li:hover .itemTitle a {

color: #010101;

}

.addCART {

position: absolute;

top: 0;

left: 0;

width: 228px;

height: 186px;

border: 1px solid rgba(51, 51, 51, 1);

border-bottom: 0;

background: rgba(255, 255, 255, 0.5);

opacity: 0;

-webkit-transition: opacity 0s;

-moz-transition: opacity 0s;

-o-transition: opacity 0s;

}

.addCART a {

text-decoration: none;

display: inline-block;

width: 157px;

height: 40px;

margin: 100px auto auto 40px;

background-color: #333;

text-align: center;

font: 14px/40px'OpenSans-Italic', sans-serif;

color: #fff;

opacity: 0;

-webkit-transition: opacity 1s;

-moz-transition: opacity 1s;

-o-transition: opacity 1s;

}

.itemTitle {

position: absolute;

bottom: 0;

left: 0;

width: 208px;

height: 36px;

border: 1px solid rgba(51, 51, 51, 0);

-webkit-transition: opacity 1s;

-moz-transition: opacity 1s;

-o-transition: opacity 1s;

border-top: 0;

padding: 10px;

background: rgba(255, 255, 255, 0.5);

}

.itemTitle p, .itemTitle span, .itemTitle a {

text-transform: uppercase;

}

.itemTitle a {

color: #003f75;

text-decoration: none;

display: block;

}

.itemTitle span {

color: #a20000;

}

.view p { top: 5px; margin: 0 10px 0 0; }

.view p,

.view a {

float: left;

display: inline-block;

text-decoration: none;

position: relative;

}

.icon-grid {

background: url("https://webdevtrick.com/wp-content/uploads/grid-view.png") no-repeat 0 0;

height: 16px;

width: 16px;

top: 7px;

}

.icon-list {

background: url("https://webdevtrick.com/wp-content/uploads/list-view.png") no-repeat 0 0;

height: 32px;

width: 32px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com)
$(".view a").on('click', function(){
    $('.products ul').toggleClass('list');
    return false;
});

// Code By Webdevtrick ( https://webdevtrick.com)

$(".view a").on('click', function(){

$('.products ul').toggleClass('list');

return false;

});

That’s It. Now you have successfully created CSS List and Grid View Switch With jQuery, List/Grid View Manage Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.