CODEWITHSUNDEEP
jqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6511

Slide input field in from right?

Currently my input field reveals from top to bottom.

How do I change this so it appears from the right?

http://jsfiddle.net/hckrj218/

// Hide all the elements in the DOM that have a class of "box"
 jQuery('.box').hide();

 jQuery('.clickme').each(function() {
     jQuery(this).show(0).on('click', function(e) {
      
        e.preventDefault();
        
         jQuery(this).next('.box').slideToggle('fast');
    });
});
/* line 84, sass/components/_form.scss */
.search {
  position: relative;
  float: right;
  color: #EAEAEA;
}
/* line 89, sass/components/_form.scss */
.search input {
  width: 250px;
  text-indent: 5px;
  line-height: 29px;
  padding: 0;
  border: 1px solid #EAEAEA;
  font-family: "Open Sans", sans-serif;
  padding: 12px 7px;
  font-size: 14px;
  font-weight: 900;
}
/* line 102, sass/components/_form.scss */
.search .fa-search {
  position: absolute;
  top: 3px;
  left: auto;
  right: 10px;
}

/* line 110, sass/components/_form.scss */
.box {
  float: right;
}

/* line 114, sass/components/_form.scss */
.clickme {
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="search">

<a href="#" class="clickme">
                                <img src="http://placehold.it/36x40" width="36" height="40" class="search-icon" />
                            </a>
                            
                            <div class="box">
                                <form role="search" method="get" class="search-form" action="#">
                                    <label>
                                        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
                                    </label>
                                </form>
                            </div>
    
</div>

Upvotes: 1

Views: 379

Answers (1)

Tamil Selvan C
Tamil Selvan C

Reputation: 20229

Include jquery UI and changed it as jQuery(this).next('.box').toggle('slide', {direction: 'right'});

Try

 jQuery('.box').hide();

 jQuery('.clickme').each(function() {
     jQuery(this).show(0).on('click', function(e) {

        e.preventDefault();

         jQuery(this).next('.box').toggle('slide', {direction: 'right'});
    });
});

See http://jsfiddle.net/tamilcselvan/hckrj218/2/

Upvotes: 1

Related Questions