Home/ Questions/Q 8648121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T13:14:28+00:00

Task: I wanted to create a simple share button which extends to a share

  • 0

Task: I wanted to create a simple share button which extends to a share section (F,T,G,P) when clicked.

I failed to let the section slide out of the share button – what I really, really wanted – but managed to let a separate ul element slide out on the right side.

The animation worked… until I set the ul to hide initially via $('.networks').hide();

The sections is intended to only show up after a click, but now after the first click it just “pops open” ignoring the configured slide-out. Sliding only works in both directions (open and close) after clicking on it at least once .

I’ve uploaded an Example here at Codepen.io and as a jsFiddle.

Side note: the demos are behaving a little bit strange since they appear to only show a slide-in fx. The slide-out fx, with which we start, always looks like it pops open – that’s not the case, it works after the second click, so you got to focus your eyes to see it (on a normal browser it visibly works better).

PS: Bonus points if you help me make this slide out of the “share” button. Be aware that I only have rudimentary knowledge of Javascript ( * duck and run * ).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take a look at this fiddle link.

    I changed the display property of the buttons to be inline-block instead of inline.
    Elements with display inline can not have a width and i think it was the reason why jQuery was not able to animates the Elements width. I also animated the wrap around the ul instead of the ul.

    EDIT: made a fast mockup of the thing sliding out of the button. Changed some css to be on the list elements itself instead of on the a elements, just work through the css and I think it will look ok.
    edit forgot the link: link

    • 0