toggle share

by ian_smithz

HTML

<div class="share-container">

	<ul class="share__toggle n">
		<li class="toggle-state is-closed">
			<a class="toggler" href="#"><span>Share this </span><span class="accessibility">page in your favourite social networks.</span><i class="icon icon-share"></i></a>
		</li>
	</ul>

	<ul class="addthis_toolbox hide togglee n">
		<li> <a class="addthis_button_facebook" title="Facebook" href="#"><i class="icon icon-facebook"></i><span>Facebook</span></a></li>
		<li> <a class="addthis_button_twitter" title="Twitter" href="#"><i class="icon icon-twitter"></i><span>Twitter</span></a></li>
		<li> <a class="addthis_button_googleplus" title="Google +" href="#"><i class="icon icon-gplus"></i><span>Google +</span></a></li>
		<li> <a class="addthis_button_pinterest" title="Pinterest" href="#"><i class="icon icon-pinterest"></i><span>Pinterest</span></a></li>
		<li> <a class="addthis_button_email" title="Email" href="#"><i class="icon icon-mail"></i><span>Email</span></a></li>
	</ul>
</div>

CSS

// -----------------------------------------------------------------------------
//
// Share this - used in product page
//
// -----------------------------------------------------------------------------

.share-container {
    position: absolute; 
    right: 0px;
    top: -10px;
    z-index: 1;

    .no-js & {
        display:none;
    }

    .share__toggle {
        width: 118px;

        @media #{$sm-only} {
            width: 50px;
        }

        li {
            background-color: $darkblue;
            border-bottom: 1px solid #001b64;
            font-size: 13px;
            line-height: 1.5;
            display: block;
            height: 51px;

            &.is-closed {
                background-color: transparent;
                border-bottom: 1px solid transparent;

                a {
                    color: $midgrey;
                    text-decoration: underline;
                }
            }
        }

        a {
            color: #fff;
            padding: 17px 0 14px 15px;
            display: block;
            text-decoration: none;
            position: relative; 

            .icon-share {
                font-size: 175%;
                position: absolute;
                top: 10px;
                right: 4px;

                @media #{$sm-only} {
                    top: 8px;
                    left: 9px;
                }
            }

            span {
                @media #{$sm-only} {
                    display: none;
                }
            }
        }
    }

    .addthis_toolbox {
        width: 118px;

        @media #{$sm-only} {
            width: 50px;
        }

        li {
            background-color: $screwfixblue;
            border-bottom: 1px solid #001b64;
            border-top: 1px solid #0091ca;
            font-size: 13px;
            line-height: 1.5;
            display: block;
            height: 52px;
            position: relative;

            &:last-child {
               ...

JavaScript

$(".toggler").click(function(e){
        e.preventDefault();
        $(".togglee").slideToggle();
        $(".toggle-state").toggleClass('is-closed');
    });