Title: .slideToggle Javascript issue with search form
Last modified: August 31, 2016

---

# .slideToggle Javascript issue with search form

 *  [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * (@thisguynelson)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/)
 * Hey guys,
 * I have a search form in my header that I want to stick to the top of the screen
   when scrolling just like I do with my menu. At this time, I’m able to have it
   stick where I want and all that. The only problem is that I need it to slide 
   to the left when I toggle the search button (the box is hidden until toggled).
   Currently, it slides to the bottom nicely and then jumps to the left of the button,
   where I want it to end up. However, this doesn’t look smooth.
 * Here is my JS:
 *     ```
       /*
        * Toggles Header Search On and Off
        */
       jQuery(document).ready(function($){
           $(".search-toggle").click(function(){
               $("#search-container").slideToggle('slow',  function(){
                   $('.search-toggle').toggleClass('active');
               });
               // Optional return false to avoid the page "jumping" when clicked
               return false;
           });
       });
       ```
   
 * Please let me know what I need to change!
 * Thanks,
 * Brett

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/#post-6922627)
 * Sounds like a CSS issue. Can you show us the page with the issue?
 *  Thread Starter [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * (@thisguynelson)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/#post-6922631)
 * It’s currently being hosted on local servers.
 * Here is the CSS:
 *     ```
       .search-toggle {
           float: right;
           width: 86px;
           height: 86px;
           padding: 22px;
           margin-right: 20px;
           color: #fff;
           text-align: center;
           cursor: pointer;
       }
   
       @media screen and (max-width: 600px) {
           .search-toggle {
               position: absolute;
               top: 0;
               right: 0;
               margin-right: 0;
           }
       }
   
       input[type="search"] {
           box-sizing: border-box;
           width: 100%;
       }
       .search-box-wrapper {
           z-index: 2;
           width: 100%;
           display: none;
       }
       .search-box {
           padding-top: 1rem;
           padding-bottom: 1rem;
           background: #000;
       }
       .search-box .search-field {
           max-width: 392px;
           float: right;
           padding: 1rem 2rem 1rem 4rem;
           font-size: 20px;
           font-size: 2rem;
           background-color: #fff;
           border: 0;
       }
   
       .error404 .search-submit,
       .search .search-submit,
       .search-box .search-submit {
           display: none;
       }
       ```
   
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/#post-6922633)
 * Can you replicate the issue using a sandbox like JSfiddle? You want to make it
   as easy as possible for volunteers to help you
 *  Thread Starter [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * (@thisguynelson)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/#post-6922635)
 * Hmmm, I’m not really sure how to do that. I tried to paste the html, css, and
   js into the JSfiddle but I just got a static black box.
 * Essentially, I would just like to know what the JS would look like to have a 
   slide left, not a slide down.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘.slideToggle Javascript issue with search form’ is closed to new replies.

## Tags

 * [form](https://wordpress.org/support/topic-tag/form/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [left](https://wordpress.org/support/topic-tag/left/)
 * [right](https://wordpress.org/support/topic-tag/right/)
 * [slideToggle](https://wordpress.org/support/topic-tag/slidetoggle/)
 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [thisguynelson](https://wordpress.org/support/users/thisguynelson/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/slidetoggle-javascript-issue-with-search-form/#post-6922635)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics