Toggle hiding and showing data without using pseudo elements of CSS, HTML5 and javascript

userVc4u 0
Viewed 62

I am trying to use HTML and CSS to hide and show data on click. I cannot use JavaScript, pseudo-elements such as checkbox(:checked), :radio, :focus with tabindex, :target and details of HTML5. Its for an outlook email template and I have tried all solutions using pseudo elements, HTML5. Here is what's allowed: https://www.caniemail.com/clients/outlook/

I understand the email template tech is primitive and there are limited options. Please help.

Here are all the options that don't work:

  1. http://jsfiddle.net/ionko22/4sKD3/
  2. http://jsfiddle.net/79z30ymk/
  3. http://jsfiddle.net/79z30ymk/1/
  4. http://jsfiddle.net/79z30ymk/2/

sample :

<head>
  <style>
    .clicker {
      width: 100px;
      height: 100px;
      background-color: blue;
      outline: none;
      cursor: pointer;
    }
    
    .hiddendiv {
      display: none;
      height: 200px;
      background-color: green;
    }
    
    .clicker:focus+.hiddendiv {
      display: block;
    }
  </style>
</head>

<body>
  <div>
    <div class="clicker" tabindex="1">Click me</div>
    <div class="hiddendiv"></div>
  </div>
</body>

html-email pseudo-element css-selectors css html
2 Answers

My idea to solve this problem is following:

Have a div for the answer with fixed height and a hidden scrollbar. Inside this div there are two divs with the same height. The first one is empty and the second one has a named anchor and the answer.

When you click on the question link all you do is navigate to the answer anchor. A working example based on your previous examples can be found here below:

.faq ul li {
  display: block;
  float: left;
  padding: 5px;
}

.answer {
  display: block;
  border: 0;
  height: 40px;
  overflow: hidden;
}

.answer div {
  height: 40px;
}
<div class="faq">
  <ul>
    <li><a href="#answer-1" target="">Question 1</a><br>
      <div class="answer">
        <div></div>
        <a name='answer-1'></a>
        <div>Answer 1</div>
      </div>
    </li>
    <li><a href="#answer-2" target="">Question 2</a><br>
      <div class="answer">
        <div></div>
        <a name='answer-2'></a>
        <div>Answer 2</div>
      </div>
    </li>
    <li><a href="#answer-3" target="">Question 3</a><br>
      <div class="answer">
        <div></div>
        <a name='answer-3'></a>
        <div>Answer 3</div>
      </div>
    </li>
  </ul>
</div>

Please let me now if this solves the problem,

Bruno Marotta0

Outlook desktop (Windows) is fundamentally a print-based email client. The rendering engine is MS Word.

Once the email is received by Outlook, it gets interpreted according to a precise pixel-perfect solution, complete with inch measurements, not pixels. It doesn't have the capability to display anything dynamic, except in the smallest of ways such as a link or an animated GIF.

The best you can do is create some sort of alternative for Outlook users, using their conditional comments - perhaps scroll down to see the answer type thing.

<!--[if mso]> //code for Outlook <![endif]-->
<!--[if !mso]><!-->
// code for everything else    
<!--<![endif]-->
useryowB0
Related