conditional css in a form setup section

Hi
​
I need to make part of a form visible based on some value fro a db read.
Something like

if there is a partner record {show the partner div} else {hide the partner div}

I am using an event switcher to trap that condition so:

​
How can I add CSS references there -

div#idPartnerInfoContainer {display:visible !important;}
or
div#idPartnerInfoContainer {display:hidden !important;}

​
I have seen that ref to add a new div (https://www.chronoengine.com/forums/posts/t105236/ccv6-table-cell-text-conditional-formatting-based-on-date-today) but that won't really suit here because I need to allow for a check box to also enable or disable that div.
​
I wondered about adding a <link .... ></link>to a small file but that doesn't seem to work.
​
any suggestions (or better still - solutions🙂 )
​
Regards
Nick

Try using Custom Codes instead of PHP and just add the style for every condition like this:
partnerYes

<style>#idPartnerInfoContainer {display: block;}</style>

partnerNo

<style>#idPartnerInfoContainer {display: none;}</style>

* Avoid the !important rule and if you use the display: property use it with one of the following values (none, inline, block, inline-block) if you want to use the (visible, hidden) values you can use the visibility: property. (https://www.w3schools.com/css/css_display_visibility.asp)
​
As for the check box to enable or disable that div the fastest way is with a JavaScript action.
- Add a class to the checkbox container after the field
Checkbox -> Advanced -> Container class = ENABLE_DISABLE_SWITCH
- Add a JavaScript action in the Designer (make sure you check the Add inside domready event) with this code:

$('.ENABLE_DISABLE_SWITCH').click(function(){
 $('#idPartnerInfoContainer').slideToggle();
});

Make sure you have the correct id and class everywhere and it should work fine.
Good luck🙂

Good morning to you both,
​
Thanks for the fast replies - Bob, it has been a while since we last exchanged posts.
​
And Gatsman - yes - wrong syntax in my example. 🙄. A question though - you mention 'Avoid the!important rule'. That I had not heard before. I use it a lot an need to check out the arguments for and against.
​
I had concluded that I would need to resort to JQuery/JavaScript but maybe the Joomla CSS option will suit my current needs.
​
I have used the 'Event' on the #idPartnerInfoContainer check box control and that works fine so suspect that I won't need that style example that Gatsman suggests though that does answer how I might use a control that does not include a built in event - for example - a text field or the like. I gather that ENABLE_DISABLE_SWITCH is built in to the CF library.
​
Thanks again - away for a couple of days but will try both of your suggestions
​
Thanks again
​
Nick

Hello Nick,
I had issues before with the .slideToggle and elements that had !important that's why i said that.
Make your tests and if it works by all means use !important.

Thanks - I did some checking on the web and the advice is the same - avoid it! so I shall be rather more sparing in it's use and see how I go. In this case - removing all bar three seems to be right. Those three avoided clashes with some .ui. (joomla?) definitions.
​
Nick

Getting very close now.

$document = JFactory::getDocument();

/** If there is a partner on this record show the partner block **/

$styleContainer = '#idPartnerInfoContainer{
 display:block !important;
 }';
$document->addStyleDeclaration( $styleContainer );

/** and set the toggle on **/
$slider = 'div#idHasPartner div.checkbox{
  background-color: aqua !important;
 }';
$document->addStyleDeclaration( $slider );

That last code

/** and set the toggle on **/
$slider = 'div#idHasPartner div.checkbox{
  background-color: aqua !important;
 }';
$document->addStyleDeclaration( $slider );

picks and flags the toggle on the page,.
​
I can't nut out how to replace that with code - presumably javascript - that sets that check box on. JavaScript an JQuery not my strong points. I usspect that it is in the reference Bob provided.
​
Try again later. Once again - thanks for the help.
​
Regards
Nick

I don't know about the way Bod referenced but you can try with the following in a Custom Code in the Setup Section (where #checkdox25 is your checkbox id, replace true with false to uncheck)

<script>
jQuery(document).ready(function() {
 jQuery('#checkbox25').prop('checked', true);
});
</script>

Hi Gatsman
I managed to crack it using the techniques that Bob referenced. I used this in a setup

<?php
$jdoc = \JFactory::getDocument();
$jdoc->addScript(JURI::root().'components\com_u3aV5\membership\js\setPartnerControls.js');
?>

and, in that file,

jQuery(document).ready(
        function (jQ) {
          function enableControls() {
//            Force the partner switch on for renew members
//            the names will be triggered by that switch
            jQ("input#idpartnerToJoin").prop('checked',true);
//              and hide the instructons 
            jQ("div#idHasPartner").prop('hidden',true);
          }
          enableControls();
        } // function (jQ) 
); // jQuery(document).ready;

Basically the same as that you suggest but I was having trouble embedding the JQuery directly. apart from that - using an external editor provides some JQ syntax checking and the like.
​
Regards
Nick