jQuery Forum

I tried both:


and both worked the same, with no apparent display or functional difference - is there any practical difference between the two? Since the outcome is apparently the same, what is the difference between "siblings" and "prev" in this case?

For who might be interested, you can remove only the title and not the close button:

I know this is an old post, but I recently came across this through a web search and wanted to contribute what I did to make it work. I tried Steve's suggestion of using:

$("#leave_help").siblings(".ui-dialog-titlebar").hide()

However for some reason it didn't work. It got rid of the title bar, but the close button was lost. So then I tried using sorin.eug's suggestion of:

$('.ui-dialog-title').remove();

But it had the same results for me.

I admit that the likely cause of failure was due to my limited knowledge of jQuery and not because of bad suggestions, as it obviously worked for eventide.

So what I did to solve this was to change ".ui-widget-header" class to have the same color background as my div content so it would appear to be the same. Then I created a new class for the title bar and for the div content that added borders, again to make it appear as though it was all the same box and it worked out great.

Here is the end result, in case I lost you in my explanation.

This is to change the corner radius of the bottom left and bottom right of the title bar so it's square and not rounded:

1. .ui-dialog .ui-dialog-titlebar {
       padding: .4em 1em;
       position: relative;
       -moz-border-radius-bottomleft: 0px/*{cornerRadius}*/;
       -webkit-border-bottom-left-radius: 0px/*{cornerRadius}*/;
       -khtml-border-bottom-left-radius: 0px/*{cornerRadius}*/;
       border-bottom-left-radius: 0px/*{cornerRadius}*/;
       -moz-border-radius-bottomright: 0px/*{cornerRadius}*/;
       -webkit-border-bottom-right-radius: 0px/*{cornerRadius}*/;
       -khtml-border-bottom-right-radius: 0px/*{cornerRadius}*/;
       border-bottom-right-radius: 0px/*{cornerRadius}*/;
   }

I added these classes to my div so the bottom left and bottom right corners would be rounded and not square.(also one more which is my own and explained below)

1. <div id="leave_help" class="ui-corner-bl ui-corner-br cus-dialog-content">
   Some content goes here.
   </div>

Then I added a border to the title bar class, excluding the bottom border to give it the "one box" appearance:

1. .ui-widget-header { /*{borderColorHeader}*/
       border-top:2px outset #BBB;
       border-left:2px outset #BBB;
       border-right:2px outset #444;
       border-bottom:none;
       background: #FFF;
   }

And then finally I added a custom class for the div content, excluding the top border again to give it the "one box" appearance:

1. .cus-dialog-content    {
       border-left:2px outset #BBB;
       border-right:2px outset #444;
       border-bottom:2px outset #444;
       border-top:none;
       padding:15px;
       padding-top:0px;
       background-color:#FFF;
   }

Nice to see this topic, which helped me a lot, get solved. I am also very new to the UI dialog control , and feel so helpless on the detailed operation of it, thanks to this hot discussion, I know a lot towards dialog title bar . Cheers.