Unfolding Post

Developer
Isac Fadoni
Size
4,069 Kb
Views
66,792
  1. Unfolding Post Previews
  2. Unfolding Post HTML Codes
  3. Unfolding Post CSS Codes
  4. Unfolding Post JS Codes

How do I make an unfolding post?

Inspired in Google's Material Design.. What is a unfolding post? How do you make a unfolding post? This script and codes were developed by Isac Fadoni on 13 June 2022, Monday.

Unfolding Post Previews
IQ Test

Unfolding Post - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Unfolding Post</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- # Author: Isac Fadoni
-->
<div class="wrap"> <h2>Unfolding Post</h2> <p>Created by Isac Fadoni</p> <section class="post-container"> <article class="post"> <header> <div class="fakeimage"></div> <h2>Lorem Ipsum</h2> <p><i class="fa fa-calendar"></i>01/21/15</p> <p><i class="fa fa-user"></i>Isac Fadoni</p> <a href="#" class="toggler"> <i class="fa fa-angle-right"></i> </a> </header> <div class="post-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu leo, tempus sed efficitur ac, faucibus ac urna. In vestibulum non purus non pellentesque. Aenean accumsan est eu lacinia mollis. Praesent fermentum rhoncus risus, vel scelerisque nibh commodo id. Nunc nunc erat, mollis sit amet semper vitae, mattis eget quam. Ut tempus et augue a efficitur. Fusce vel nibh viverra, feugiat urna et, porttitor quam. Morbi imperdiet leo nec massa porttitor, sed laoreet mauris posuere. Pellentesque scelerisque nibh non orci dapibus ultricies. Proin a aliquet leo. </p> </div> </article> <article class="post"> <header> <div class="fakeimage"></div> <h2>Lorem Ipsum</h2> <p><i class="fa fa-calendar"></i>01/21/15</p> <p><i class="fa fa-user"></i>Isac Fadoni</p> <a href="#" class="toggler"> <i class="fa fa-angle-right"></i> </a> </header> <div class="post-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu leo, tempus sed efficitur ac, faucibus ac urna. In vestibulum non purus non pellentesque. Aenean accumsan est eu lacinia mollis. Praesent fermentum rhoncus risus, vel scelerisque nibh commodo id. Nunc nunc erat, mollis sit amet semper vitae, mattis eget quam. Ut tempus et augue a efficitur. Fusce vel nibh viverra, feugiat urna et, porttitor quam. Morbi imperdiet leo nec massa porttitor, sed laoreet mauris posuere. Pellentesque scelerisque nibh non orci dapibus ultricies. Proin a aliquet leo. </p> </div> </article> <article class="post"> <header> <div class="fakeimage"></div> <h2>Lorem Ipsum</h2> <p><i class="fa fa-calendar"></i>01/21/15</p> <p><i class="fa fa-user"></i>Isac Fadoni</p> <a href="#" class="toggler"> <i class="fa fa-angle-right"></i> </a> </header> <div class="post-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu leo, tempus sed efficitur ac, faucibus ac urna. In vestibulum non purus non pellentesque. Aenean accumsan est eu lacinia mollis. Praesent fermentum rhoncus risus, vel scelerisque nibh commodo id. Nunc nunc erat, mollis sit amet semper vitae, mattis eget quam. Ut tempus et augue a efficitur. Fusce vel nibh viverra, feugiat urna et, porttitor quam. Morbi imperdiet leo nec massa porttitor, sed laoreet mauris posuere. Pellentesque scelerisque nibh non orci dapibus ultricies. Proin a aliquet leo. </p> </div> </article> <article class="post"> <header> <div class="fakeimage"></div> <h2>Lorem Ipsum</h2> <p><i class="fa fa-calendar"></i>01/21/15</p> <p><i class="fa fa-user"></i>Isac Fadoni</p> <a href="#" class="toggler"> <i class="fa fa-angle-right"></i> </a> </header> <div class="post-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu leo, tempus sed efficitur ac, faucibus ac urna. In vestibulum non purus non pellentesque. Aenean accumsan est eu lacinia mollis. Praesent fermentum rhoncus risus, vel scelerisque nibh commodo id. Nunc nunc erat, mollis sit amet semper vitae, mattis eget quam. Ut tempus et augue a efficitur. Fusce vel nibh viverra, feugiat urna et, porttitor quam. Morbi imperdiet leo nec massa porttitor, sed laoreet mauris posuere. Pellentesque scelerisque nibh non orci dapibus ultricies. Proin a aliquet leo. </p> </div> </article> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Unfolding Post - Script Codes CSS Codes

/* Imports */
@import url(http://fonts.googleapis.com/css?family=Lato:400,300);
/* Mixins & Variables */
/* Basic */
body { background: #2BAEFF;
}
.wrap { position: absolute; display: block; width: 450px; padding: 5px; box-sizing: border-box; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.wrap > h2, .wrap > p { margin-bottom: 10px; text-align: center; font-family: Lato, sans-serif; font-size: 1.5em; color: #fafafa;
}
.wrap > p { font-size: 1.1em; color: #186B9E;
}
/* Post */
.post-container > h2, .wrap.post-container > p { margin-bottom: 10px; font-family: Lato, sans-serif; font-size: 1.3em;
}
.post { position: relative; display: block; padding: 5px; background: #fafafa; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); overflow: auto; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82); transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82);
}
.post:first-child { border-radius: 3px 3px 0px 0px;
}
.post:last-child { border-radius: 0px 0px 3px 3px;
}
.post.show { margin: 5px 0; border-radius: 3px; box-shadow: 0px 15px 40px 5px rgba(0, 0, 0, 0.2), 0px 5px 10px rgba(0, 0, 0, 0.2); z-index: 2;
}
.post .post-content { position: relative; max-height: 0px; padding: 5px; clear: both; margin-top: 0px; box-sizing: border-box; overflow: auto; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82); transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82);
}
.post .post-content.show { max-height: 999px; margin-top: 50px; visibility: visible; opacity: 1;
}
.post .post-content p { font-family: Lato, sans-serif; line-height: 1.2em; text-align: justify; color: #333;
}
.post header .toggler { position: relative; display: block; width: 30px; color: #aaa; font-size: 1.5em; float: right; text-align: center; -webkit-transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82); transition: all 0.3s cubic-bezier(0.4, 0.08, 0.14, 0.82);
}
.post header .toggler.show { -webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.post header .fakeimage { width: 50px; height: 50px; margin: 0px 10px 0px 5px; float: left; border-radius: 100%; background: #aaa;
}
.post header h2, .post header .wrap > p { margin-bottom: 10px; font-family: Lato, sans-serif; font-size: 1.2em; color: #222;
}
.post header p { margin-right: 10px; font-family: Lato, sans-serif; font-size: 0.9em; color: #aaa; float: left;
}
.post header p i { margin-right: 5px;
}

Unfolding Post - Script Codes JS Codes

$(function unfoldPost() { toggle = $('.post header .toggler'); toggle.on('click', function(e) { e.preventDefault(); $(this).closest('.post').find('.post-content').toggleClass('show'); $(this).closest('.post').toggleClass('show'); $(this).toggleClass('show'); });
});
Unfolding Post - Script Codes
Unfolding Post - Script Codes
Home Page Home
Developer Isac Fadoni
Username isac
Uploaded June 13, 2022
Rating 3.5
Size 4,069 Kb
Views 66,792
Do you need developer help for Unfolding Post?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Isac Fadoni (isac) Script Codes
Name
PayPal Logo
Dribbble to Code
Hamburger Menu Icon
ES2015 Notification Plugin
A Pen by Isac Fadoni
Material Design Login Form
Eyedropper CSS
Unfolding Post v2
Material Hover
Circle to Rectangle Card Transition
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!