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">☰ 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("▼ Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("☰ 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">☰ 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("▼ Social Sharing");
},
function(){
x$('.socialSharingList').slideUp(300);
x$(this).html("☰ Social Sharing");
});
});
</script>
Replies