diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index b9a201b95e..37359234d4 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -1,5 +1,6 @@
 import {
-  BasicTree, CdTimerComp,
+  BasicTree,
+  CdTimerComp,
   CurrentTimer,
   MovieContainer,
   WhyReact,
@@ -8,124 +9,170 @@ import {
   SocialCard,
   RandomMemeGenerator,
   ReactTodoApp,
+  ExpandingCards,
   //import play here
 } from "plays";
 
 export const plays = [
   {
-    id: 'pl-0001',
-    name: 'Why React',
-    description: 'A simple application to demonstrate JSX usages',
-    component: () => { return <WhyReact /> },
-    path: '/plays/why-react',
+    id: "pl-0001",
+    name: "Why React",
+    description: "A simple application to demonstrate JSX usages",
+    component: () => {
+      return <WhyReact />;
+    },
+    path: "/plays/why-react",
     index: true,
-    level: 'Beginner',
-    tags: 'JSX',
-    github: 'atapas'
+    level: "Beginner",
+    tags: "JSX",
+    github: "atapas",
   },
   {
-    id: 'pl-0002',
-    name: 'Clock',
-    description: 'This application shows the current time and it increases every second',
-    component: () => { return <CurrentTimer /> },
-    path: '/plays/clock',
-    level: 'Beginner',
-    tags: 'JSX, Schedule',
-    github: 'atapas',
-    blog: 'https://blog.greenroots.info',
-    video: 'https://youtube.com/tapasadhikary'
+    id: "pl-0002",
+    name: "Clock",
+    description:
+      "This application shows the current time and it increases every second",
+    component: () => {
+      return <CurrentTimer />;
+    },
+    path: "/plays/clock",
+    level: "Beginner",
+    tags: "JSX, Schedule",
+    github: "atapas",
+    blog: "https://blog.greenroots.info",
+    video: "https://youtube.com/tapasadhikary",
   },
   {
-    id: 'pl-0003',
-    name: 'Countdown Timer',
-    description: 'It is a timer that fires every second and decreases the time',
-    component: () => { return <CdTimerComp /> },
-    path: '/plays/date-time-counter',
-    level: 'Intermediate',
-    tags: 'Schedule, Component Structure, Hooks, Custom Hooks',
-    github: 'atapas',
-    blog: 'https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks',
+    id: "pl-0003",
+    name: "Countdown Timer",
+    description: "It is a timer that fires every second and decreases the time",
+    component: () => {
+      return <CdTimerComp />;
+    },
+    path: "/plays/date-time-counter",
+    level: "Intermediate",
+    tags: "Schedule, Component Structure, Hooks, Custom Hooks",
+    github: "atapas",
+    blog: "https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks",
   },
   {
-    id: 'pl-0004',
-    name: 'Movies',
-    description: 'A list of movies from API call.',
-    component: () => { return <MovieContainer /> },
-    path: '/plays/movies',
-    level: 'Intermediate',
-    tags: 'Fetch Data, Hooks',
-    github: 'atapas',
+    id: "pl-0004",
+    name: "Movies",
+    description: "A list of movies from API call.",
+    component: () => {
+      return <MovieContainer />;
+    },
+    path: "/plays/movies",
+    level: "Intermediate",
+    tags: "Fetch Data, Hooks",
+    github: "atapas",
     featured: true,
-    blog: 'https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks'
+    blog: "https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks",
   },
   {
-    id: 'pl-0005',
-    name: 'Organization Tree',
-    description: 'A simple org tree',
-    component: () => { return <BasicTree /> },
-    path: '/plays/org-tree',
-    level: 'Intermediate',
-    tags: 'Recursion, Tree',
-    github: 'green-roots',
-    featured: true
-  }, {
-    id: 'pl-counter',
-    name: 'Counter',
-    description: 'A simple counter which increments the value upto a certain limit!',
-    component: () => { return <CounterApp /> },
-    path: '/plays/counter',
-    level: 'Beginner',
-    tags: 'JSX, State, Props',
-    github: 'murtuzaalisurti',
-    featured: true
-  }, {
-    id: 'pl-states',
-    name: 'States',
-    description: 'States in Functional Components',
-    component: () => { return <States /> },
-    path: '/plays/states',
-    level: 'Beginner',
-    tags: 'Hooks,State,JSX',
-    github: 'Abhishek-90',
-    cover: '',
-    blog: 'https://abhishek-90.github.io/My-Portfolio/'
-  }, {
-    id: 'pl-social-card',
-    name: 'Social Card',
-    description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.',
-    component: () => { return <SocialCard /> },
-    path: '/plays/social-card',
-    level: 'Intermediate',
-    tags: 'Form,Events,Complex State',
-    github: 'atapas',
-    cover: '',
-    blog: 'https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler',
-    video: ''
-  }, {
-    id: 'pl-random-meme-generator',
-    name: 'Random Meme Generator',
-    description: 'A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!',
-    component: () => { return <RandomMemeGenerator /> },
-    path: '/plays/random-meme-generator',
-    level: 'Beginner',
-    tags: 'JSX,Hooks,API,EventHandling',
-    github: 'murtuzaalisurti',
-    cover: '',
-    blog: '',
-    video: ''
-  }, {
-    id: 'pl-react-todo-app',
-    name: 'React Todo App',
-    description: 'It is a simple Todo App which keeps track of your regular work',
-    component: () => { return <ReactTodoApp /> },
-    path: '/plays/react-todo-app',
-    level: 'Beginner',
-    tags: 'ReactHooks, JavaScript, Css, React State',
-    github: 'nirban256',
-    cover: 'https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png',
-    blog: '',
-    video: ''
+    id: "pl-0005",
+    name: "Organization Tree",
+    description: "A simple org tree",
+    component: () => {
+      return <BasicTree />;
+    },
+    path: "/plays/org-tree",
+    level: "Intermediate",
+    tags: "Recursion, Tree",
+    github: "green-roots",
+    featured: true,
+  },
+  {
+    id: "pl-counter",
+    name: "Counter",
+    description:
+      "A simple counter which increments the value upto a certain limit!",
+    component: () => {
+      return <CounterApp />;
+    },
+    path: "/plays/counter",
+    level: "Beginner",
+    tags: "JSX, State, Props",
+    github: "murtuzaalisurti",
+    featured: true,
+  },
+  {
+    id: "pl-states",
+    name: "States",
+    description: "States in Functional Components",
+    component: () => {
+      return <States />;
+    },
+    path: "/plays/states",
+    level: "Beginner",
+    tags: "Hooks,State,JSX",
+    github: "Abhishek-90",
+    cover: "",
+    blog: "https://abhishek-90.github.io/My-Portfolio/",
+  },
+  {
+    id: "pl-social-card",
+    name: "Social Card",
+    description:
+      "The Social Card helps you telling who you are using photo, name, and other social footprints.",
+    component: () => {
+      return <SocialCard />;
+    },
+    path: "/plays/social-card",
+    level: "Intermediate",
+    tags: "Form,Events,Complex State",
+    github: "atapas",
+    cover: "",
+    blog: "https://blog.greenroots.info/how-to-create-react-form-with-a-single-change-event-handler",
+    video: "",
+  },
+  {
+    id: "pl-random-meme-generator",
+    name: "Random Meme Generator",
+    description:
+      "A project to demonstrate the use of API to fetch random memes! It also demonstrates how you can do event handling!",
+    component: () => {
+      return <RandomMemeGenerator />;
+    },
+    path: "/plays/random-meme-generator",
+    level: "Beginner",
+    tags: "JSX,Hooks,API,EventHandling",
+    github: "murtuzaalisurti",
+    cover: "",
+    blog: "",
+    video: "",
+  },
+  {
+    id: "pl-react-todo-app",
+    name: "React Todo App",
+    description:
+      "It is a simple Todo App which keeps track of your regular work",
+    component: () => {
+      return <ReactTodoApp />;
+    },
+    path: "/plays/react-todo-app",
+    level: "Beginner",
+    tags: "ReactHooks, JavaScript, Css, React State",
+    github: "nirban256",
+    cover:
+      "https://res.cloudinary.com/atapas/image/upload/v1650866465/demos/cover_y20bzk.png",
+    blog: "",
+    video: "",
+  },
+  {
+    id: "pl-expanding-cards",
+    name: "Expanding-Cards",
+    description:
+      "this project shows bunch of striped cards on screen if you want to show the card. you just have to click to expand it",
+    component: () => {
+      return <ExpandingCards />;
+    },
+    path: "/plays/expanding-cards",
+    level: "Beginner",
+    tags: "Jsx, useState, hooks, toggle, React, css-transitions",
+    github: "Deepak8717",
+    cover: "",
+    blog: "",
+    video: "",
   }, //replace new play item here
 ];
-
-
diff --git a/src/plays/expanding-cards/Expanding-Card-Images.jsx b/src/plays/expanding-cards/Expanding-Card-Images.jsx
new file mode 100644
index 0000000000..2bb6d85f63
--- /dev/null
+++ b/src/plays/expanding-cards/Expanding-Card-Images.jsx
@@ -0,0 +1,25 @@
+const data = [
+  {
+    title: "Title One",
+    url: "https://images.unsplash.com/photo-1511028931355-082bb4781053",
+  },
+  {
+    title: "Title Two",
+    url: "https://images.unsplash.com/flagged/photo-1559511331-7649f05944e3?",
+  },
+  {
+    title: "Title Three",
+    url: "https://images.unsplash.com/photo-1611773951628-0d5b4c2507fb?",
+  },
+  {
+    title: "Title Four",
+    url: "https://images.unsplash.com/photo-1608822246990-be7bc0d9b2d7?",
+  },
+
+  {
+    title: "Title Five",
+    url: "https://images.unsplash.com/photo-1567117439290-a8b5ef5bab89?",
+  },
+];
+
+export default data;
diff --git a/src/plays/expanding-cards/ExpandingCards.css b/src/plays/expanding-cards/ExpandingCards.css
new file mode 100644
index 0000000000..e6a22904a9
--- /dev/null
+++ b/src/plays/expanding-cards/ExpandingCards.css
@@ -0,0 +1,76 @@
+.play-container {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+.card-container {
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+}
+
+.Expanding-card {
+  width: 80px;
+  height: 400px;
+  cursor: pointer;
+  margin: 20px;
+  position: relative;
+  transition: width 1s;
+  -webkit-backface-visibility: hidden;
+}
+
+.active {
+  width: 600px;
+}
+.Expanding-card-imgage {
+  width: 100%;
+  height: 400px;
+  object-fit: cover;
+  border-radius: 50px;
+}
+.info {
+  position: absolute;
+  bottom: 10%;
+  left: 5%;
+  opacity: 0;
+  color: #fff;
+  font-size: 35px;
+  font-weight: bold;
+  transition: opacity 2s;
+  background-color: rgba(27, 27, 27, 0.5);
+  padding: 0 5%;
+  border-radius: 10px;
+}
+.active .info {
+  opacity: 1;
+}
+@media only screen and (max-width: 600px) {
+  .card-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  .Expanding-card {
+    width: 100%;
+    height: 50px;
+    transition: height 1s;
+  }
+  .Expanding-card .Expanding-card-imgage {
+    height: 50px;
+    transition: height 1s;
+  }
+  .active {
+    height: 250px;
+  }
+  .active .Expanding-card-imgage {
+    height: 250px;
+  }
+  .info {
+    bottom: 5%;
+    font-size: 25px;
+    transition: opacity 1s;
+  }
+  .Expanding-card-imgage {
+    border-radius: 30px;
+  }
+}
diff --git a/src/plays/expanding-cards/ExpandingCards.jsx b/src/plays/expanding-cards/ExpandingCards.jsx
new file mode 100644
index 0000000000..ac4cc7c0e8
--- /dev/null
+++ b/src/plays/expanding-cards/ExpandingCards.jsx
@@ -0,0 +1,61 @@
+import { getPlayById } from "meta/play-meta-util";
+
+import PlayHeader from "common/playlists/PlayHeader";
+import "./ExpandingCards.css";
+import { useState } from "react";
+import data from "./Expanding-Card-Images";
+
+function ExpandingCards(props) {
+  // Do not remove the below lines.
+  // The following code is to fetch the current play from the URL
+  const { id } = props;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+
+  const [activeCard, setActiveCard] = useState(0);
+
+  const toggle = (i) => {
+    setActiveCard(i);
+  };
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="play-container">
+            <h1> Expanding Cards</h1>
+            <p>Click on image to expand</p>
+            <div className="card-container">
+              {data.map((item, i) => {
+                return (
+                  <div
+                    key={i}
+                    className={
+                      i === activeCard
+                        ? "Expanding-card active"
+                        : "Expanding-card"
+                    }
+                    onClick={() => toggle(i)}
+                  >
+                    <div className="info">{item.title}</div>
+                    <img
+                      src={item.url}
+                      className="Expanding-card-imgage"
+                      alt="Nature pics"
+                    />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ExpandingCards;
diff --git a/src/plays/expanding-cards/Readme.md b/src/plays/expanding-cards/Readme.md
new file mode 100644
index 0000000000..cf3d0b8074
--- /dev/null
+++ b/src/plays/expanding-cards/Readme.md
@@ -0,0 +1,13 @@
+# expanding-cards
+
+This is small beginer friendly project that expanded the stried/collapsed card on click.
+
+## What will you learn ?
+
+- How to use `useState` hook
+- How to toggle as well as how to untoggle other elements at same time while you toggle one element.
+- css transition
+
+The file `ExpandingCards.jsx` has all the code required to build this project! So, if you want to get a grasp of it, try implementing it on your own!
+
+Keep Learning
diff --git a/src/plays/expanding-cards/cover.png b/src/plays/expanding-cards/cover.png
new file mode 100644
index 0000000000..cbdf2438b5
Binary files /dev/null and b/src/plays/expanding-cards/cover.png differ
diff --git a/src/plays/index.js b/src/plays/index.js
index 0cda94fb07..570df76b8e 100644
--- a/src/plays/index.js
+++ b/src/plays/index.js
@@ -10,4 +10,5 @@ export { default as States } from 'plays/states/States';
 export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
 export { default as ReactTodoApp } from 'plays/react-todo-app/ReactTodoApp';
+export { default as ExpandingCards } from 'plays/expanding-cards/ExpandingCards';
 //add export here