Noscript Expand Element 3

Scott MacGregor wanted some help with improving the way the vCard attachments are drawn in Thunderbird. Since Thunderbird uses the world leading rendering engine he felt that the old way to show the vCard was just too boring.

Then TaSK came up with a good looking Photoshop mock-up. However, these have a serious issue and that is that scripting is turned off for the mail body.

To make a long story short I thought that this should be doable using CSS3. I thought for a minute and I came to the conclusion that using the :checked pseudo class for check boxes would fit best with this scenario. To hide the container just make a CSS rule that switches the display property depending on the checked state.

input + div {
   display: none;

input:checked + div {
   display: block;

The next step was to replace the default look of the checkbox with a background image. However, I did not manage to remove the borders, background color nor the color so I had to do some ugly hacks here. What I ended up doing is to have a transparent checkbox above the expand icon. Another, better solution would probably be to use a label for the expand icon and let that label be a label for a hidden checkbox.

See the end result!

  • Martijn

    That’s a great idea, Erik!
    I really wish that you could use these kinds of things with all html elements. But it would probably not really belong into css anyway.
    Now it is needed to use the checkbox element to get the :checked pseudo-class, which is a bit of a hack.

  • Tim Scarfe


    Please don’t truncate the content on your RSS feed!


  • Erik Arvidsson

    Tim: The RSS uses an excerpt of the entry. Changing the length of the excerpt is not a good idea. I would need to change the MT template to use the XHTML content instead.

    I’ll most likely switch blog engine soon. MT is just too anoying with all its rebuilding… and at that time I should see if I can make the RSS feeds better.