Question

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

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.