Forum Moderators: open

Message Too Old, No Replies

Social icons switcher

         

toplisek

1:23 pm on Nov 27, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I like to set switcher when clicked on icon. Please find script:


Socialswitcher = {
init: function() {
var panel = jQuery('.social-switcher');

jQuery('.mybutton1').click(function ()
{
jQuery('.social-switcher').show();
}
);

jQuery('.social-close').click(function ()
{
jQuery('.social-switcher').hide();
}
);
}
}



Button area:
<i class="mybutton1"></i>

<div class="social-switcher" style="display: none;">
<div class="social-close"><i class="icon-close"></i></div>


</div></div>
Why is this not working when I click? Need help

Fotiman

4:15 pm on Nov 27, 2015 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Make sure you actually call the init method after you've defined it:

Socialswitcher = {
init: function() {
...
}
}
...
Socialswitcher.init();

Also, if your elements have no content (as is the case in your example above), then unless you have explicit style rules that control the width/height, the elements may be shown but will have a height of 0, so you won't see them. So try something like this, or modify your CSS to give these items a specific height/width:

<i class="mybutton1">Show</i>

<div class="social-switcher" style="display: none;">
Some content
<div class="social-close"><i class="icon-close">X</i></div>


Lastly, you're fetching '.social-switcher' from the DOM multiple times. Instead, use the "panel" instance so you don't need to search the DOM again:


Socialswitcher = {
init: function() {
var panel = jQuery('.social-switcher');

jQuery('.mybutton1').click(function ()
{
panel.show();
}
);

jQuery('.social-close').click(function ()
{
panel.hide();
}
);
}
}