Charms bar using Metro UI CSS

I am new to web development .........

I used Metro UI CSS to create this

Now I'm trying to emulate the Enchant panel.

I want that when the user clicks on the theme button, the panel should be displayed on the right containing some controls, etc. The panel should hide when it loses focus (user clicks behind the panel).

The Enchant panel is added using <div class="charms">

I also added style="display:none;"

so that the panel is not visible at startup.

Then I used the following code to show it when the user selects the topic button or text

$(document).click(function(event) 
{
var $target = $(event.target);
var target = event.target;

if (!target.id.indexOf("theme")) //if the target id contains "theme" then show charms bar
{
    $("div .charms").fadeIn(600)
}

else
{
    if (target.id != "charms")  //if the charms bar itseff is NOT clicked
        $("div .charms").fadeOut(600)
}   
});

      

        
        
        
      

    

I don't like this code because when I click on the control in the charms bar it hides the bar.

All I have to do is create a floating bar that is displayed when the user clicks a button and hides when the user clicks something else .......