Home Web Design Bootstrap Bootstrap Expand Cards Animation With CSS | Bootstrap Collapsible Card

Bootstrap Expand Cards Animation With CSS | Bootstrap Collapsible Card

November 18, 2019

13747

How we can create expanding collapsible card using Bootstrap CSS JS? Solution: See this Bootstrap Expand Cards Animation With CSS, Bootstrap Collapsible Card.

Previously I have shared some card programs, but this is an expandable card with collapse animation. Basically, this type of card majorly used in the backend site of websites because it takes less place and easy to manage. The card opens on when you want, after that it takes space on the webpage.

Today you will learn to create Collapsible Card using Bootstrap. Basically there are 6 cards with dummy inner items, when you will click on that it will expand in the downside. The card contains a title and a number for showing some data about the inner section, and when you will click on it then some sub-items will reveal. Also, these cards have collapsible animation on expanding and hide.

So, Today I am sharing Bootstrap Expand Cards Animation With CSS. There I have used Bootstrap for creating the layout and some functions, and JS handling important features also CSS has an important role. This type of card you can use on your website for showing more information in less space.

If you are thinking now how this expand cards actually are, then see the preview given below.

Preview Of Collapsible Card

See this video preview to getting an idea of how these cards look like.

https://webdevtrick.com/wp-content/uploads/expanding-cards.mp4?_=1

Live Demo

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

Bootstrap Expand Cards Animation With CSS Source Code

Before sharing source code, let’s talk about it. First I have created the layout using bootstrap’s grid system (info). And I have created the first card then I have copied and paste for creating others, later I made some changes in all cards. Inside the all cards section I have put the same class or ID names. Also In the HTML file, I have linked other files like CSS, JS, and Bootstrap CDN link.

Now using CSS I have styled all the items as you can see in the preview. With CSS I have done styling works like margin, padding, size, animation, etc. For creating the collapsible feature I have used CSS transform command, and some other works had done like color using CSS. I have reduced some element’s size and change the grid system using CSS @media query.

Basically, JavaScript handling the toggle feature of the program. There I have used jQuery for easy work and save times, and as we know jQuery is a JS library that’s why I am calling this JavaScript program. For creating the open and close card function I have used JS if {} else {} statement to declare conditions.

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 program 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>Bootstrap Expand Cards | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class='row dashboard-cards'>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        First Task
        <small>You have 14 pending tasks</small>
      </h2>
      <div class='task-count'>
        14
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        Second Task
        <small>You have 62 pending tasks</small>
      </h2>
      <div class='task-count'>
        62
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        Third Task
        <small>You have 9 pending tasks</small>
      </h2>
      <div class='task-count'>
        9
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        Fourth Task
        <small>You have 56 pending tasks</small>
      </h2>
      <div class='task-count'>
        56
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        Fifth Task
        <small>You have 12 pending tasks</small>
      </h2>
      <div class='task-count'>
        12
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
  <div class='card col-md-4 '>
    <div class='card-title'>
      <h2>
        Sixth Task
        <small>You have 24 pending tasks</small>
      </h2>
      <div class='task-count'>
        24
      </div>
    </div>
    <div class='card-flap flap1'>
      <div class='card-description'>
        <ul class='task-list'>
          <li>
            1st Inner Section Task
            <span>59%</span>
          </li>
          <li>
            2nd Inner Section Task
            <span>11%</span>
          </li>
          <li>
            3rd Inner Section Task
            <span>100%</span>
          </li>
          <li>
            4th Inner Section Task
            <span>7%</span>
          </li>
        </ul>
      </div>
      <div class='card-flap flap2'>
        <div class='card-actions'>
          <a class='btn' href='#'>Close</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/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

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

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

<!DOCTYPE html>

<head>

<title>Bootstrap Expand Cards | Webdevtrick.com</title>

</head>

<body>

<h2>

First Task

<small>You have 14 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

<h2>

Second Task

<small>You have 62 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

<h2>

Third Task

<small>You have 9 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

<h2>

Fourth Task

<small>You have 56 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

<h2>

Fifth Task

<small>You have 12 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

<h2>

Sixth Task

<small>You have 24 pending tasks</small>

</h2>

</div>

<li>

1st Inner Section Task

</li>

<li>

2nd Inner Section Task

</li>

<li>

3rd Inner Section Task

</li>

<li>

4th Inner Section Task

</li>

</ul>

</div>

<a class='btn' href='#'>Close</a>

</div>

</script><script src="function.js"></script>

</body>

</html>

style.css

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

/* Code By Webdevtrick (https://webdevtrick.com) */
body {
  background: #f3f3f3;
  padding: 30px 20px;
}

.dashboard-cards {
  position: relative;
  padding-bottom: 50px;
  margin: 0 !important;
}

.dashboard-cards .card {
  background: #ffffff;
  display: inline-block;
  -webkit-perspective: 1000;
  perspective: 1000;
  z-index: 20;
  padding: 0 !important;
  margin: 5px 5px 10px 5px;
  position: relative;
  text-align: left;
  transition: all 0.3s 0s ease-in;
  z-index: 1;
  width: calc(33.33333333% - 10px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dashboard-cards .card:hover {
  box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);
  transition: all 0.3s ease;
}

.dashboard-cards .card .card-title {
  background: #ffffff;
  padding: 20px 15px;
  position: relative;
  z-index: 0;
}

.dashboard-cards .card .card-title h2 {
  font-size: 24px;
  letter-spacing: -0.05em;
  margin: 0;
  padding: 0;
}

.dashboard-cards .card .card-title h2 small {
  display: block;
  font-size: 14px;
  margin-top: 8px;
  letter-spacing: -0.025em;
}

.dashboard-cards .card .card-description {
  position: relative;
  font-size: 14px;
  border-top: 1px solid #ddd;
  padding: 10px 15px 0 15px;
}

.dashboard-cards .card .card-actions {
  box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);
  padding: 10px;
  text-align: center;
}

.dashboard-cards .card .card-flap {
  background: #d9d9d9;
  position: absolute;
  width: 100%;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

.dashboard-cards .card .flap1 {
  transition: all 0.3s 0.3s ease-out;
  z-index: -1;
}

.dashboard-cards .card .flap2 {
  transition: all 0.3s 0s ease-out;
  z-index: -2;
}

.dashboard-cards.showing .card {
  cursor: pointer;
  opacity: 0.6;
  -webkit-transform: scale(0.88);
  transform: scale(0.88);
}

.dashboard-cards .no-touch .dashboard-cards.showing .card:hover {
  opacity: 0.94;
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}

.dashboard-cards .card.d-card-show {
  opacity: 1 !important;
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
}

.dashboard-cards .card.d-card-show .card-flap {
  background: #ffffff;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.dashboard-cards .card.d-card-show .flap1 {
  transition: all 0.3s 0s ease-out;
}

.dashboard-cards .card.d-card-show .flap2 {
  transition: all 0.3s 0.2s ease-out;
}

.dashboard-cards .card .task-count {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 22px;
  right: 10px;
  background: #ecf0f1;
  text-align: center;
  line-height: 40px;
  border-radius: 100%;
  color: #333333;
  font-weight: 600;
  transition: all .2s ease;
}

.dashboard-cards .task-list {
  padding: 0 !important;
}

.dashboard-cards .task-list li {
  padding: 10px 0;
  padding-left: 10px;
  margin: 3px 0;
  list-style-type: none;
  border-bottom: 1px solid #e9ebed;
  border-left: 3px solid #ff3a3a;
  transition: all .2s ease;
}

.dashboard-cards .task-list li:hover {
  background: #ecf0f1;
  transition: all .2s ease;
}

.dashboard-cards .task-list li span {
  float: right;
  color: #ff3a3a;
  margin-right: 5px;
}

.dashboard-cards.showing .card.d-card-show .task-count {
  color: #ffffff;
  background: #ff3a3a;
  transition: all .2s ease;
}

.dashboard-cards .card-actions .btn {
  color: #333;
}

.dashboard-cards .card-actions .btn:hover {
  color: #ff3a3a;
}
@media (max-width:750px) {
  .dashboard-cards .card {
    margin-top: 10px;
    width: 100%;
  }
}

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

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

body {

background: #f3f3f3;

padding: 30px 20px;

}

.dashboard-cards {

position: relative;

padding-bottom: 50px;

margin: 0 !important;

}

.dashboard-cards .card {

background: #ffffff;

display: inline-block;

-webkit-perspective: 1000;

perspective: 1000;

z-index: 20;

padding: 0 !important;

margin: 5px 5px 10px 5px;

position: relative;

text-align: left;

transition: all 0.3s 0s ease-in;

z-index: 1;

width: calc(33.33333333% - 10px);

cursor: pointer;

transition: all 0.3s ease;

}

.dashboard-cards .card:hover {

box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5);

transition: all 0.3s ease;

}

.dashboard-cards .card .card-title {

background: #ffffff;

padding: 20px 15px;

position: relative;

z-index: 0;

}

.dashboard-cards .card .card-title h2 {

font-size: 24px;

letter-spacing: -0.05em;

margin: 0;

padding: 0;

}

.dashboard-cards .card .card-title h2 small {

display: block;

font-size: 14px;

margin-top: 8px;

letter-spacing: -0.025em;

}

.dashboard-cards .card .card-description {

position: relative;

font-size: 14px;

border-top: 1px solid #ddd;

padding: 10px 15px 0 15px;

}

.dashboard-cards .card .card-actions {

box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075);

padding: 10px;

text-align: center;

}

.dashboard-cards .card .card-flap {

background: #d9d9d9;

position: absolute;

width: 100%;

-webkit-transform-origin: top;

transform-origin: top;

-webkit-transform: rotateX(-90deg);

transform: rotateX(-90deg);

}

.dashboard-cards .card .flap1 {

transition: all 0.3s 0.3s ease-out;

z-index: -1;

}

.dashboard-cards .card .flap2 {

transition: all 0.3s 0s ease-out;

z-index: -2;

}

.dashboard-cards.showing .card {

cursor: pointer;

opacity: 0.6;

-webkit-transform: scale(0.88);

transform: scale(0.88);

}

.dashboard-cards .no-touch .dashboard-cards.showing .card:hover {

opacity: 0.94;

-webkit-transform: scale(0.92);

transform: scale(0.92);

}

.dashboard-cards .card.d-card-show {

opacity: 1 !important;

-webkit-transform: scale(1) !important;

transform: scale(1) !important;

}

.dashboard-cards .card.d-card-show .card-flap {

background: #ffffff;

-webkit-transform: rotateX(0deg);

transform: rotateX(0deg);

}

.dashboard-cards .card.d-card-show .flap1 {

transition: all 0.3s 0s ease-out;

}

.dashboard-cards .card.d-card-show .flap2 {

transition: all 0.3s 0.2s ease-out;

}

.dashboard-cards .card .task-count {

width: 40px;

height: 40px;

position: absolute;

top: 22px;

right: 10px;

background: #ecf0f1;

text-align: center;

line-height: 40px;

border-radius: 100%;

color: #333333;

font-weight: 600;

transition: all .2s ease;

}

.dashboard-cards .task-list {

padding: 0 !important;

}

.dashboard-cards .task-list li {

padding: 10px 0;

padding-left: 10px;

margin: 3px 0;

list-style-type: none;

border-bottom: 1px solid #e9ebed;

border-left: 3px solid #ff3a3a;

transition: all .2s ease;

}

.dashboard-cards .task-list li:hover {

background: #ecf0f1;

transition: all .2s ease;

}

.dashboard-cards .task-list li span {

float: right;

color: #ff3a3a;

margin-right: 5px;

}

.dashboard-cards.showing .card.d-card-show .task-count {

color: #ffffff;

background: #ff3a3a;

transition: all .2s ease;

}

.dashboard-cards .card-actions .btn {

color: #333;

}

.dashboard-cards .card-actions .btn:hover {

color: #ff3a3a;

}

@media (max-width:750px) {

.dashboard-cards .card {

margin-top: 10px;

width: 100%;

}

function.js

The last step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick (https://webdevtrick.com)
$(document).ready(function(){
  var zindex = 10;
  
  $("div.card").click(function(e){
    e.preventDefault();

    var isShowing = false;

    if ($(this).hasClass("d-card-show")) {
      isShowing = true
    }

    if ($("div.dashboard-cards").hasClass("showing")) {
      $("div.card.d-card-show")
        .removeClass("d-card-show");

      if (isShowing) {
        $("div.dashboard-cards")
          .removeClass("showing");
      } else {
        $(this)
          .css({zIndex: zindex})
          .addClass("d-card-show");

      }

      zindex++;

    } else {
      $("div.dashboard-cards")
        .addClass("showing");
      $(this)
        .css({zIndex:zindex})
        .addClass("d-card-show");

      zindex++;
    }
    
  });
});

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

$(document).ready(function(){

var zindex = 10;

$("div.card").click(function(e){

e.preventDefault();

var isShowing = false;

if ($(this).hasClass("d-card-show")) {

isShowing = true

}

if ($("div.dashboard-cards").hasClass("showing")) {

$("div.card.d-card-show")

.removeClass("d-card-show");

if (isShowing) {

$("div.dashboard-cards")

.removeClass("showing");

} else {

$(this)

.css({zIndex: zindex})

.addClass("d-card-show");

}

zindex++;

} else {

$("div.dashboard-cards")

.addClass("showing");

$(this)

.css({zIndex:zindex})

.addClass("d-card-show");

zindex++;

}

});

That’s It. Now you have successfully created Bootstrap Expand Cards Animation With CSS, Bootstrap Collapsible Card Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.