Pure CSS Right-Hand Slide-out Interface on Click

Question

I'm trying to create a right-hand tab/slider using only CSS, NO Javascript of any kind. My initial work was based on the example code found here: Pure CSS Slide-out Interface The only problem, it's based on hover which is no good for small media devices. I'm trying to recode it to work via clicks instead. I'm close but it's not playing nice yet. Any ideas?

CSS

<style>
    #slideout {
        /* position: absolute; */
        position: fixed;
        top: 100px;
        right: 0;
        width: 35px;
        padding: 12px 0;
        text-align: center;
        background: #6DAD53;
        color: #fff;
        cursor:pointer;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #slideout_inner {
        position: fixed;
        top: 100px;
        right: -250px;
        background: #6DAD53;
        width: 200px;
        padding: 25px;
        height: 130px;
        cursor:auto;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-border-radius: 0 0 0 5px;
        -moz-border-radius: 0 0 0 5px;
        border-radius: 0 0 0 5px;
    }
    #slideout_inner textarea {
        width: 190px;
        height: 100px;
        margin-bottom: 6px;
    }
    #showblock:checked + #slideout{right: 250px;}
    #showblock{display:none;}
</style>

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" charset="utf-8">
<div id="slideout">
    <input type="checkbox" id="showblock">
    <label id="slideout_tab" for="showblock" title="Admin Slider">
        <i class="fa fa-cogs fa-spin"></i>
    </label>
    <div id="slideout_inner">
        <form>
            <textarea></textarea>
            <input type="submit" value="Post feedback"></input>
        </form>
    </div>
</div>

jsfiddle

Answer 1

Here's what I worked out in the end. Thank you to @skyline3000 for helping me realise the + selector only work on the next sibling, this was key to helping me realize I needed to change the location of my input tag.

CSS

<style>
    #slideout {
        /* position: absolute; */
        position: fixed;
        top: 100px;
        right: 0;
        width: 35px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    #slideout_tab {
        position: relative;
        top: 0;
        left: 0;
        padding: 12px 6px 12px 12px;
        text-align: center;
        background: #86B135;
        color: #fff;
        cursor:pointer;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #slideout_inner {
        position: absolute;
        top: -50px;
        left: 35px;
        background: #86B135;
        width: 220px;
        padding: 15px;
        height: 200px;
        cursor:auto;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #showblock:checked + #slideout{right: 250px;}
    #showblock{display:none;}
</style>

HTML

<input type="checkbox" id="showblock">
<div id="slideout">
    <label id="slideout_tab" for="showblock" title="Admin Slider">
        <i class="fa fa-cogs fa-spin"></i>
    </label>
    <div id="slideout_inner">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan gravida arcu, eget elementum tellus condimentum ac. Nullam aliquam sem condimentum, dictum mi id, feugiat ex.
    </div>
</div>

jsfiddle