lundi 20 avril 2015

Javascript button - Upon click, other buttons slide up from behind it?

I'm very new to JS and JQuery, and I'm trying to finish up a request that involves buttons that slide up. Steps:

  1. User clicks on 'Expand' button.
  2. Activates JS, 4 social media buttons slide upwards. User than can click one of the buttons to open a pop up to share the page (this is already set up).
  3. User can close this menu by clicking the 'Expand' button again.

    .share-button-group {
        position: fixed;
        bottom: 60px;
        right: 30px;
        z-index: 999;
    
        a + a {
            margin-top: @padding-small-horizontal;
        }
    }
    
    .share-button-expand {
        .share-button-variant(@gray-light, '\f1e0');
    }
    
    .share-button-facebook {
        .share-button-variant(#3b5998, '\f09a');
    }
    
    

And here it is in our Jade-esque markup (extremely similar, just small tweaks)

    if share
      .share-button-group
        a.share-button-facebook(data-share="facebook")
          span.sr-only Share on Facebook 
        a.share-button-expand(data-share="expand")
          span.sr-only Share

This is how the buttons are set up in LESS. How can I target the 'Expand' button so that when clicked, the four buttons behind it will appear? I know to wait until the document is ready and that it's a click(function()) but that's as far as I've been able to find. I'm working in a Jade like language, with Bootstrap as well. Thanks!

Aucun commentaire:

Enregistrer un commentaire