Smooth CSS Transition for Expanding Search Container

  • Hi,

    I need to implement a smooth CSS transform transition for expanding a search container when the user clicks on the search icon. Currently, no classes are being added after clicking the icon. Here is the existing JavaScript code:

    jQuery(document).on(‘click’, function (e) {

        if(e.target.id !==”toggle-search”){

          jQuery(‘#toggle-search’).siblings().hide();

          }else{

            jQuery(‘#toggle-search’).siblings().show();

    ? ? ? }

    });
    Could you please help with adding the necessary CSS transitions to achieve the desired effect?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author wpdreams

    (@wpdreams)

    Hi,

    Well, I’m not sure if you can do it with the .hide() and show() jQuery methods only, that will not trigger any transitions as it just changes the visibility.

    To make like a width transition, you should try something like:

    • Making the initial container width auto, but the input width 0
    • Then after triggering the .show() adding a class for example “search_open”, which forces an auto or fixed with for the input

    It’s not that simple though, as the CSS should be applied probably to the container and not the siblings.

    All the best,
    Ernest

    Thread Starter elsazehra

    (@elsazehra)

    Can you please share JS code? I’ve tried but the code is not working properly.

    Plugin Author wpdreams

    (@wpdreams)

    I don’t have any working solution for this type of customization unfortuantely, I would have shared it with you already.

    All the best,
    Ernest

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.