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); });