javascript - Implement jQuery slidedown effect -


i have jquery slide down animation, implement paste section bellow.

content smaller device every button need have slide down element attached on him self.

can 1 show me how can this.

mine jquery slidedown code:

$(".squere").click(function(){         $(".content").hide(800);     $(".squere").removeclass("active");     $(this).addclass("active"); $(this).next(".content").slidedown(1000); }); 

mine content:

            <div id="squere" class='container hidden-lg hidden-md '>                 <div class="row">                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle homepagegriddefault" src="img/circle/home-all-icon-off.png">                      </div>                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">                     </div>                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">                     </div>                 </div>                 <div class="row">                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">                     </div>                     <div class="col-sm-4 col-xs-4">strange book here :)</div>                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">                     </div>                 </div>                 <div class="row">                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">                     </div>                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">                     </div>                     <div class="col-sm-4 col-xs-4">                         <img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">                     </div>                 </div> 

fiddle example, whole dive , responsive not mind upper circle in html section.

simply use sildedown , slideup can resolve problem.try fiddle. used slideup , slide down method in place of adding , removing active class.

$(document).ready(function(){    $('.content').hide(); });  $(document).on('click',".center",function(){        $(".content").slideup(300);     $(this).next(".content").slidedown(300); }); 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -