Hide/Show Onclick Using CSS and HTML

  • creceliusaf · Member ·

    I am trying to add hide/show onclick code so that when you click on one word, i.e. “details”, and it both shows more text and hides it on click. I found this code via another forum and when I use a CSS tester in Chrome it works, but when I put it into my website using the CSS customization and HTML on the page, the <input> disappears and it doesn’t work.

    CSS: 

    <style>
label { position: absolute; top:0; left:0}

input#show, input#hide {
    display:none;
}

span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}
</style>

    HTML: 

    <input type="radio" id="show" name="group">
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi there, users cannot use the input HTML tag at WordPress.com for security reasons. You can read more on code restrictions in this support document.

  • creceliusaf · Member ·

    Is there another way to code a hide/show feature that would work within WordPress’ restrictions?

  • thesacredpath · Member ·

    Sorry, no there is not. Generally this sort of thing would be done with Javascript or Ajax and we can’t add those at WordPress.com.

  • The topic ‘Hide/Show Onclick Using CSS and HTML’ is closed to new replies.