1

Short

I want a list () to be hidden (visibility : hidden) if a checkbox is not pressed WITHOUT using javascrit, external file or head+style (email restrictions). How to do this ?

Long

Hello overflowers,

I want to use html tag style property

 <anytag style="">

to makes a button reveal a list inside an email.

For wider support, I want the button to "hide it if unchecked" so the list (ul) will be displayed anyway if the trick used isn't supported by the receiver.

At this point, my generated page somewhat looks like this (use an htlm reader like https://codebeautify.org/htmlviewer/)

<body>        
     <h2>Rules applied to check EMAIL</h2>
     <br>
     
    <!--Some lines with rules for the field
    such as maximum lenght.
    -->
    
     <button id = "b1" > show lines with invalid or empty datas for this field
     </button>    <!--Edit : has been replaced by checkbox-->
     <ul id="ul1"> 
     invalid EMAIL on line(s) : 
         <li style="margin-left:20px">12</li>
         <li style="margin-left:20px">16</li>
         <li style="margin-left:20px">51</li>
         <li style="margin-left:20px">52</li>
         <li style="margin-left:20px">53</li>
         <li style="margin-left:20px">57</li>
         <li style="margin-left:20px">62</li>
    </ul>
     
     <br>
     
     <h2>Rules applied to check BIRTHDATE</h2>
     <br>
     
    <!--Some lines with rules for the field
    such as minimum value.
    -->
    
     <button id = "b2" > show lines with invalid or empty datas for this field
     </button> <!--Edit : has been replaced by checkbox-->
     <ul id="ul2"> 
     invalid BIRTHDATE on line(s) : 
         <li style="margin-left:20px">12</li>
         <li style="margin-left:20px">35</li>
         <li style="margin-left:20px">51</li>
    </ul>
</body>

As told, I would like a way to hide the list if the button isn't clicked. As Javascript is disabled everywhere and some mailbox just ignore the <style> tag, I just want a solution that works with inline css or common html.

Thanks.

Martial P
  • 395
  • 1
  • 12
  • So explain what you have tried then, or at least what your research turned up so far …? – CBroe Jul 30 '20 at 11:52
  • @CBroe I have find solutions that probably works well for a website with JS or even JQuery, but it just don't work on mail. The solutions usually relly on – Martial P Jul 30 '20 at 12:17
  • “make button show content using css only” typed into Google, leads to https://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used right away. – CBroe Jul 30 '20 at 12:25
  • @CBroe The question is how do you put that in the mail ? GMail strips out "" tags and do not allow external links to a css file. – Martial P Jul 30 '20 at 15:03
  • Well then you’re pretty much out of luck. Pseudo classes don’t work with inline CSS. – CBroe Jul 31 '20 at 06:48

1 Answers1

1

HTML:

<label for="b1">show lines with invalid or empty datas for this field</label>
<input type="checkbox" id="b1">
<ul id="ul1">[...]</ul>

CSS:

#b1, #ul1 {
  display: none;
}

#b1:checked + #ul1 {
  display: inherit;
}

If you want to make interactive button without using JavaScript, you can make it using checkbox instead. In HTML you place checkbox element next to the element you want to change. In CSS you are defining styles for the element when nearby checkbox is selected using pseudo-element ":checked" and adjacent sibling selector "+".

I hope that I helped ;)

Maciej Bledkowski
  • 604
  • 9
  • 26