hide p:menuItem in p:tabmenu

Question

I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.

Something like the answer in this (prior) question would be good:

.ui-tabmenuitem: {
  visibility: hidden !important;
}

Just another small hint: Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page

Answer 1

Your code works for hiding them if I remove the invalid ":"

.ui-tabmenuitem {
    visibility: hidden !important;  
}

Tested on PF 6.0 and 5.3.

If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;

<p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">

and hide it with some script:

<script>
    $('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>

Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.

Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).