Expanding Flex Cards - How to Design Expanding Flex Cards using HTML CSS and jQuery

How to create Expanding Flex Cards using only HTML CSS and Javascript Super easy for beginners.
Please SUBSCRIBE to my KZbin channel:
/ @codingplay
-----------------------
Please LIKE and FOLLOW for daily updates:
Facebook: / codingplayfb
Instagram: / codingplay.insta
Telegram: t.me/CodingPlay
-----------------------
Download Source Code:
github.com/JamshidElmi/Expand...
-----------------------
Buy me a cup of COFFEE:
www.buymeacoffee.com/codingplay
-----------------------
Please visit my website:
codingplay.jamshidelmi.com
-----------------------

[@pankajravi9146]

wonderful bro, i just used your code on my website, though i will make few changes, but thanks much . Cheers !

[@xenonyoutub]

Nice job man

[@elonkiptoo1710]

Wauh amazing keep uploading those skills

[@CodingPlay]

I will try my best, Thank You!

[@marklnz]

Not too bad - you don't really need to go to the trouble of linking jQuery just to do add/remove an attribute though. I'd do that with vanilla JS (actually I wouldn't, I'd find a No JS way to do it). Also, not sure on some of your class naming - you don't really need to be quite so specific with some of those rules, given that this is all that's on the page. I get that if you have other ".title" elements then maybe you'd want to be more specific but that's what I mean about your naming - if you don't need those rules to apply anywhere else, just create a class that's specifically for that task, and apply a less specific rule. That's a style thing though - obviously it works fine as it is.

[@querinoland8413]

amazing, would I put an action when I click to expand I trigger a sound? with javascript?

[@jasimimran6048]

Amazing content keep it up! i just have 1 question when you apply - - bg in style how does that whole system work I'm a bit confused on that.

[@CodingPlay]

Good question! --bg is a CSS variable and I declared it in the HTML file for each "card" div and called it in the CSS file.

[@jasimimran6048]

@@CodingPlay oh okay I also noticed that you used a URL for applying a picture my question is what would I have to do if I had an image already downloaded and I had to apply those pictures on the card? P.S: Amazing content it would be even better if you provided a voice-over simultaneously.

[@CodingPlay]

@@jasimimran6048 Simply change the url("YOUR_IMAGES_PATH")

[@CodingPlay]

@@jasimimran6048 I will try my best to use my voice in the future but currently I don't have a proper recording mic and an acoustic environment.

[@xenonyoutub]

Can we use video instead of image in cards?

[@MrStelloMEllo]

Is there any tutorial how to do this on figma

[@iamgroot4060]

Unable to add images throught your code