jQuery selecrors. help for newbie

Question

Hello. I have this code, which open new jquery-ui dialog and then hide the dialog's titlebar.

 <div id="keyboard" class="keyboard dialogs">...</div>

 

  $("#keyboard").dialog({
      width: 1136,
      height: 437,
      position: ['center',400],
      closeOnEscape: false,
      autoOpen: false,
      resizable: false,
      open: function(event, ui)  {
          $(".ui-dialog-titlebar").hide(); // <-- this selector i want to change
      }
  });

But $(".ui-dialog-titlebar") select all titlebars. How do i have change selector to hide only this titlebar?

Answer 1

Give the titlebar you are trying to hide an id or some distinguishable trait that you can test against.

Answer 2

depending on where the titlebar exists in relation to the keyboard div, you'll have to traverse the dom to get to it using something like this:

$("this").parents(".ui-dialog-titlebar").hide();

Answer 3

I notice the ui parameter in the open handler. Is that a reference to the dialog that's just been opened? If it is, it'll be as simple as:

ul.find('.ui-dialog-titlebar').hide();

Answer 4

To get the titlebar you can do this:

$(this).prev('.ui-dialog-titlebar').hide();

The dialog looks roughly like this in html:

<div class="ui-dialog">
  <div class="ui-dialog-titlebar"></div>
  <div id="keyboard" class="ui-dialog-content">  <!-- "this" element -->
    Your stuff
  </div>
</div>

There are more classes and such of course, but basically you need to go back one element, the previous sibling to this is the titlebar you want to hide.