jQuery Stylish Profile Box Display | Lessoncup Programming Blog

Saturday, 18 January 2014

jQuery Stylish Profile Box Display

Hi, today i am going to tell about how to keep and display a stylish profile box in your website using jquery recently i worked on small social network project and i implement this feature for user profile dashboard, it is very simple just we need aware of regular jquery methods and how to use them according to our requirements. let's see how to implemented this small Stylish Profile Box Display APP


in html just design the profile box as you wish to display and arrange the div elements in better way and take two buttons like More and Less for navigate the div elements from short info to long info, and display only those elements which you want to sow in short info and hide the other elements those you want to show in long info.. while clicking on More About Me button just display the hidden elements in your better animation way as you comfortable.
<div class="lessoncup">
<span class="close">Close</span>
<div id="profile">

<div style=" border-bottom:1px solid #1d1d1d;" id="bioinfo">

<div id="image"></div>

<h1>Mohammad Khasim</h1><br/>
<h2>Author of Lessoncup</h2>
<p id="short-intro" style="display: block; text-align: center;height: 18px; margin-bottom: 30px; margin-top: 20px;">Pretty friendly, super cute. I Love to share knoweldge.</p>
<p class="read-more" style="display: block; "><span>More About Me</span></p>

<p id="biginfo" style="font-size: 14px;line-height: 22px;">I'm the creative person of a wonderful Programming Blog. I like programming books, and sportscars. This is my Mohammad Khasim.</p>
<ul id="social-icons"> <li><a class="twitter" target="_blank" href="http://www.twitter.com/lessoncup" title="@lessoncup on Twitter">Twitter</a></li> <li><a class="facebook" target="_blank" href="http://www.facebook.com/lessoncup" title="Facebook Profile">Facebook</a></li> <li><a class="google-plus" target="_blank" href="https://plus.google.com/+Lessoncup/" title="Google+ Profile">Google+</a></li> <li><a class="linkedin" target="_blank" href="http://in.linkedin.com/in/lessoncup" title="Linkedin Profile">LinkedIn</a></li> </ul> </div> </div>


now write the click functions on read-more and close buttons as a selectors, and i used regular jquery methods like slideUP() animate()  delay() slideDown()  fadeIn()  fadeOut() to complete this beautyfull Stylish profile box
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>


  $('.lessoncup').animate({height: "250px",marginTop: "250px"}, 500, function(){
   $(this).delay(400).animate({height: "550px",marginTop: "80px"}, 500);
   $('#bioinfo').delay(250).animate({marginTop: "-30px"}, 500);
   $('#social-icons').delay(1000).slideDown('slow').animate({top: "20px"}, 500);
  $('#social-icons').slideUp('slow').animate({top: "-97px"}, 500);
  $('#bioinfo').delay(250).animate({marginTop: "0"}, 500);
  $('.lessoncup').delay(500).animate({height: "250px",marginTop: "250px"}, 500).delay(300).animate({height: "320px",marginTop: "200px"}, 500,function(){

Live Demo   Download Script


  1. I just seen this - after 4 ( nearly 5 years at the moment... ) and it still looks better than anything else out there. WOW!
    Its awesome Mohammad :)

  2. I was wondering if anyone knows what happened to Dimepiece Los Angeles celebrity streetwear brand? I cannot check out on [url=https://dimepiecela.com/]site[/url]. I have read in Teen Vogue that they were acquired by a UK hedge fund for $50 million. I have just bought the Dimepiece Red Flags Unisex Long Sleeve Tee from Amazon and totally love it xox Dime Piece LA

  3. I was wondering if anyone knows what happened to Dimepiece Los Angeles celebrity streetwear brand? I am having trouble to proceed to the checkout on [url=https://dimepiecela.com/]store[/url]. I've read in Elle that the brand was bought out by a UK-based hedge fund for $50 million. I've just bought the Dimepiece Control the Guns Crop Sweatshirt from Amazon and totally love it xox Dimepiece Los Angeles


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons