i able code work:
[data-field-name="hideandshow"] { opacity: 0; max-height: 0; overflow: hidden; } input[id="uniquecheckbox"]:checked ~ [data-field-name="hideandshow"] { opacity: 1 !important; max-height: 100px !important; overflow: visible !important; display: block !important; }<input id="uniquecheckbox" type="checkbox"> <label>click show</label> <div data-field-name="hideandshow"> hide , show </div>in application trying style has input inside label , cannot work:
[data-field-name="hideandshow"] { opacity: 0; max-height: 0; overflow: hidden; } input[id="uniquecheckbox"]:checked ~ [data-field-name="hideandshow"] { opacity: 1 !important; max-height: 100px !important; overflow: visible !important; display: block !important; }<label><input id="uniquecheckbox" type="checkbox">click show</label> <div data-field-name="hideandshow"> hide , show </div>the application styling locked down , cannot change it. there way around html structure locked in place? ideally using css.
edit
i'm happy consider jquery solutions.
thank you,
worked out jquery if interested:
$(document).ready(function(){ $("#uniquecheckbox").click(function(){ if ( typeof hidden === 'undefined' || hidden == true ) { $(document.queryselectorall('[data-field-name="hideandshow"]')).show(100); hidden = false; } else { $(document.queryselectorall('[data-field-name="hideandshow"]')).hide(100); hidden = true; } }); });[data-field-name="hideandshow"] { display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <label><input id="uniquecheckbox" type="checkbox">click show</label> <div style="" data-field-name="hideandshow"> show , hide </div>