html - Jquery slide left right with button -
i creating simple jquery slide. when user clicks on button 1 div box show form right , 1 hide form left. here code in when click on button div's moves right left none of them hide form left.
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> .row{ max-height: 40px; overflow: hidden; background-color: pink; } .col-md-4{ border: 10px solid #eee; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">gh</div> <div class="col-md-4">gh</div> <div class="col-md-4">gh</div> <div class="col-md-4">gh</div> <div class="col-md-4">gh</div> <div class="col-md-4">gh</div> </div> <button>click</button> </div> <script type="text/javascript"> $('button').click(function(){ $(".col-md-4").next().animate({width:'toggle'},2000); }); </script> </body> </html>
i hope intended (and not misunderstood)
basically, following fiddle makes div
shown disapear sliding left when click on button
, following 1 shows right.
regards
Comments
Post a Comment