jQuery sliding the dives like facebook | Lessoncup Programming Blog

Tuesday, 29 October 2013

jQuery sliding the dives like facebook

Hi, sliding the div's like down to up or up down, this kind features we have seen in facebook create page, here the div slideUp when the user click on the div, if the user click on other div the previous div change the position to slideDown, i have developed same concept with jquery, it is quite simple just few lines of code.



HTML

take the UL tag with list items, make sure put the li tag into overflow:hidden, this feature hide the content which we are going to show after slideUp the div, inside the each list-item take one button and give class name to each button  .one, .two and .three 

<div id="lessoncup">

<div style="height:200px;">
<ul>
<li>

<div id="click" class="one">

<div class="text">CLICK TO SLIDE</div>

</div>
<div id="con">
<h1>Web Blogger</h1>
Lesson Cup programming blog for web tutorials focused on 
jquey,
php,
ajax,
mysql,
css3,
html5.
</div>
</li>


<li>

<div id="click" class="two">

<div class="text">CLICK TO SLIDE</div>

</div>
<div id="con">
<h1>Web Blogger</h1>
Lesson Cup programming blog for web tutorials focused on 
jquey,
php,
ajax,
mysql,
css3,
html5.
</div>
</li>


<li>

<div id="click" class="three">

<div class="text">CLICK TO SLIDE</div>

</div>
<div id="con">
<h1>Web Blogger</h1>
Lesson Cup programming blog for web tutorials focused on 
jquey,
php,
ajax,
mysql,
css3,
html5.
</div>
</li>

</ul>
</div>

Javascript

write the click function to each button and inside the each function use .slideUp() method to slide the div down to up position and write the .slideDown() method to slide down the dives which is already in slideUp position mode except the present div.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>


<script>

$(function(){
  
  $('.one').click(function(){
  
  $(this).slideUp('slow');
  $('.two').slideDown('slow');
  $('.three').slideDown('slow');
  
  });
  
  $('.two').click(function(){
  
  $(this).slideUp('slow');
  $('.one').slideDown('slow');
  $('.three').slideDown('slow');
  
  });
  
  
  $('.three').click(function(){
  
  $(this).slideUp('slow');
  $('.one').slideDown('slow');
  $('.two').slideDown('slow');
  
  });
 
});


</script>

CSS

<style>

body{ font-family:Verdana, Geneva, sans-serif; font-size:11px;}

#lessoncup{ width:900px; height:auto; border:solid #CCC 0px; padding:5px; margin:0 auto;}

h1{ width:360px; margin:0 auto; padding:10px;}

ul{ margin:0; padding:0; list-style:none; margin-top:30px;}

li{ width:250px; height:200px; border:solid  #CCC 3px;float:left; padding:5px; margin:5px; overflow:hidden;}

#click{width:100%; height:100%; cursor:pointer;  background-color:#F7F7F7; display:block;}

#click p{ margin:0; padding:0;}

#con{ background-color:#FFF;width:100%; height:100%; padding:5px; line-height:24px;}

.text{font-weight:bold; font-size:16px; text-transform:uppercase; margin:0 auto; width:150px; padding-top:90px;}

#con h1{font-weight:bold; margin:0; padding:0; font-size:12px; padding-bottom:5px;}

</style>

Live Demo Download Script

1 comment :

  1. Lots of errors I can see:

    1. In your headline it should be Divs not 'dives'
    2. I can see repeating IDs in your code, check for "#click and #con" Ids
    3. Also technically you are doing lots of unnecessary work to do this.

    $("#lessoncup li").on("click", "div:first-child", function () {
    $(this).slideUp('slow').parent().siblings().find(">div:first-child").slideDown("slow");
    });

    this much code is enough perform your specific task.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons