Tip: Hide and Show Social Sharing Buttons

[Bizz]

You may have seen I provided a tip for showing and hiding the members bio and was asked if this could be done with the social buttons so here is the tip to be able to do that.

Note: This will work accross your whole site as these buttons will show above blogs etc if you have set them to show there as well. There are two options of code below which will allow you to choose between only showing this tip on profiles only.

You can see them working here: https://jr-images.ning.com/members/bizz

Desktop View

MOBILE VIEW

EXAMPLE OF ABOVE BLOG PAGE

Ok so we need to add some code to do this so we add some css and custom code

 

First we add some css and this goes in your Design Studio > Custom CSS

/* SOCIAL SHARING HIDE SHOW*/
a.Social-more-switch{
display:block;
padding : 5px 0px;
text-align:left
}
  a.Social-more-switch:hover{
cursor: pointer;
text-decoration: none!important;
outline: none!important;
}
.socialHasSwitch .socialSharingList.menu{
margin-top: 30px;
}
/* Animation of icons */
.socialSharingListItemColored{
margin:3px;
transition: all ease-in-out 300ms;
}
.socialSharingListItemColored:hover{
transition: all ease-in-out 300ms;
margin-top: -1px;
}

 

 This goes in your Social Site Builder > Custom Code > End Of Page section

THIS CODE IS FOR SHOWING ACROSS WHOLE SITE

<script>
x$(document).ready(function(){
// SHOW HIDE WHOLE SITE
var socialTitle = 'Social Sharing';
x$('<a class="Social-more-switch" alt="More" title="Show / Hide">&#9776 Social Sharing</a>').prependTo('.socialButtons');
x$('a.Social-more-switch').closest('.socialButtons').addClass('socialHasSwitch');
x$('.socialSharingList').hide();
x$('a.Social-more-switch').toggle(
function(){
x$('.socialSharingList').slideDown(300);
x$(this).html("&#9660 Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("&#9776 Social Sharing");
});
});
</script>

 

 

This goes in your Social Site Builder > Custom Code > End Of Page section

THIS CODE IS FOR SHOWING IN ONLY PROFILES ONLY

 

<script>
x$(document).ready(function(){
// SHOW AND HIDE PROFILES ONLY
var socialTitle = 'Social Sharing';
x$('<a class="Social-more-switch" alt="More" title="Show / Hide">&#9776 Social Sharing</a>').prependTo('.profileCoverArea-socialActions .socialButtons');
x$('a.Social-more-switch').closest('.socialButtons').addClass('socialHasSwitch');
x$('.profileCoverArea-socialActions .socialSharingList').hide();
x$('a.Social-more-switch').toggle(
function(){
x$('.socialSharingList').slideDown(300);
x$(this).html("&#9660 Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("&#9776 Social Sharing");
});
});
</script>