CODEWITHSUNDEEP
jqueryexpandright-to-left
Jeff Hewitt
Jeff Hewitt

Reputation: 11

jquery show hide right to left onclick

I'm trying to get an effect where I can click on an image to show a search form and it expands the div from right to left

Here's the code I've tried

html

 <div class="searchbox">
 This is some text that I need to hide.<span class="clickme">Click Me</span>
 </div>

css

 .searchbox {
  height: 20px
  overflow: hidden;
  }

jquery

  $( ".clickme" ).click(function() {
  $( ".searchbox" ).animate({
  left: "+=100",
  width: "toggle"
  }, 500, function() {
  });
  });

Thanks for any help!

Upvotes: 0

Views: 2421

Answers (2)

Jeff Hewitt
Jeff Hewitt

Reputation: 11

This is what I ended up doing:

HTML

 <div>
 <div class="searchbox" data-thmr="thmr_80">
 <img class="clickme" data-thmr="thmr_80" src="/sites/default/files/sherlock.png">
 </div>

CSS

 .clickme {
 left: 720px;
 position: relative;
 top: 17px;
 }

.searchbox {
 display: none;
 float: right;
 height: 50px;
 overflow: hidden;
 width: 275px;
 }

jQuery

 $(document).ready(function(){

    $( ".clickme" ).click(function() {
    $( ".searchbox" ).animate({
    width: "toggle"
    }, 500, function() {
    });
    });

});

Upvotes: 1

Mic1780
Mic1780

Reputation: 1794

You are looking for jQuery .animate() method. Their API site has documentation and examples: .animate documentation can be found here

Upvotes: 0

Related Questions