Social icons switcher

[toplisek]

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]

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();
 }
 );
 }
}