Cycle displayed element without :checked, :target CSS only

Question

I'm looking to cycle between 5 or 6 currencies and only want to be able to display one currency at any given time. I can't use input tags (no :checked pseudoclass) and :target due to platform restrictions (I'm working within a rich text widget that can't navigate to a fragment identifier).

Supported HTML tags:

"br" "div" "span" "i" "b" "strong" "s" "strike" "u" "em" "blockquote" "tt" "sup" "sub" "small" "mark" "del" "ins" "ul" "ol" "li" "dl" "dt" "dd" "h1" "h2" "h3" "h4" "h5" "h6" "hr" "a"

The fiddle I'm working on: http://jsfiddle.net/nAg7W/803/ I'm hoping to have the HKD currency remain on the screen after clicking on the HKD link and then clicking elsewhere.

I've tried to toggle using the display: none; / display: block; properties, but found out from trial & error + this thread (Transitions on the display: property) that it won't work. With :focus, as soon as I click another element on the page I revert back to USD.

div p {
  transition: opacity 0s;
  display: block;
  overflow: hidden;
  position: relative
}
div p#usd {
  opacity: 1;
  height: auto;
}
div p#hkd {
  opacity: 0;
  height: 0;
}
#hkd-toggle:focus ~ #hkd {
  opacity: 1;
  height: auto;
  position: absolute;
}
#hkd-toggle:focus ~ #usd {
  opacity: 0;
  height: 0;
  position: absolute
}

<div>
  <ul style="list-style-type: none;">
    <li>
      <a href="#" id="usd-toggle">USD</a> 
      <a href="#" id="hkd-toggle">HKD</a> 
      <p id="usd">suhh</p>
      <p id="hkd">duuude</p>
    </li>
  </ul>
</div>

Any ideas on how to achieve this with purely CSS? I was hoping there could be a delay on persisting the focus state but it seems to be a dead end. Any help would be very much appreciated.

Thanks!

Answer 1

In Snippet 2, we will use an incredibly extended time delay on the "off" state of the target elements. Basicly what this does is force a state as usual but instead of milliseconds or seconds, we will set the delay to about 10 million seconds which will be about 120 days. So in this 120 day delay, the target element will still be in the "on" state. I tried to create a new set of buttons to reset the targets, but I'm running out of time, maybe with this head start you could figure the reset function.

In Snippet 1, there's only one visible pseudo-selector to use given that :target and :clicked, etc are not an option. For extra content, you can use :before and .after.

SNIPPET 2

body {
  background: black;
  color: white;
  font: 600 20px/1.5 Times;
}
a,
a:link,
a:visited {
  text-decoration: none;
  display: inline-block;
  color: white;
}
a:hover {
  color: yellow;
}
/* 
| -Make your hidden state for target 
| -Add a very long delay time on the
| transition property. As long as the
| transition is moving towards it's goal
| to complete the animation in 120 days,
| the "on" state stays active. 
*/
b {
  display: block;
  opacity: 0;
  font-size: 20px;
  transition: all 0s 10368000s;
}
/*
| -These rulesets override the long duration 
| time.
*/
.u:active + b.usd,
.g:active + a.u + b.usd,
.y:active + b.yen,
.r:active + a.y + b.yen,
.e:active + b.eur,
.b:active + a.e + b.eur {
  transition: all 0s;
}
.g:active + a.u + b.usd {
  opacity: 1;
  color: lime;
}
.u:active + b.usd.usd {
  opacity: 0;
}
.r:active + a.y + b.yen {
  opacity: 1;
  color: tomato;
}
.y:active + b.yen.yen {
  opacity: 0;
}
.b:active + a.e + b.eur {
  opacity: 1;
  color: cyan;
}
.e:active + b.eur.eur {
  opacity: 0;
}

<dl>
  <dt>Currency Exchange</dt>
  <dd>
    <a href='#/' class="g">USD</a>
    <a href="#/" class='u'></a>
    <b class="usd">$1.00</b>
  </dd>
  <dd>
    <a href='#/' class="r">YEN</a>
    <a href='#/' class="y"></a>
    <b class='yen'>¥1.00</b>
  </dd>
  <dd>
    <a href='#/' class="b">EUR</a>
    <a href='#/' class="e"></a>
    <b class='eur'>€1.00</b>
  </dd>
</dl>

SNIPPET 1

body {
  background: #333;
}
dt {
  margin: 0 0 10px 0;
  color: gold;
}
a,
a:link,
a:visited {
  background: black;
  color: yellow;
  display: block;
}
a:hover,
a:active {
  background: yellow;
  color: black;
}
b#usd,
b#hkd,
b#eur,
b#yen,
b#pso,
b#drc {
  opacity: 0;
  height: 0;
  width: 0;
  transition: all 1s linear;
}
#usd1:focus + b,
#hkd2:focus + b,
#eur3:focus + b,
#yen4:focus + b,
#pso5:focus + b,
#drc6:focus + b {
  opacity: 1;
  height: 20px;
  width: 20px;
  color: cyan;
  transition: all 1s linear;
}
#usd:hover:after,
#hkd:hover:after,
#eur:hover:after,
#yen:hover:after,
#pso:hover:after,
#drc:hover:after {
  content: '';
}

<dl>
  <dt>Currency Display</dt>
  <dd>
    <a href="#/" id="usd1">USD</a> 
    <b id="usd">USD</b>
    <a href="#/" id="hkd2">HKD</a>
    <b id="hkd">HKD</b>
    <a href="#/" id="eur3">EUR</a> 
    <b id="eur">EUR</b> 
    <a href="#/" id="yen4">YEN</a>
    <b id="yen">YEN</b>
    <a href="#/" id="pso5">PSO</a> 
    <b id="pso">PSO</b> 
    <a href="#/" id="drc6">DRC</a>
    <b id="drc">DRC</b>
  </dd>
</dl>