Have I hit a limit here by using hashtags?

Question

I'm trying to avoid the use of javascript for things that can be achieved with CSS only (I don't want to go into why too much here, just want to focus on the problem I'm having). As a result, I've developed a modal feature to my site that opens using hashtags and targets (similar to this: http://codepen.io/maccadb7/pen/nbHEg).

That's fine; works how I'd want it to. The problem now is that I want to put a CSS-only tab control inside the modal div. The only methods I've seen this involve the use of hashtags and targets (just as my modal did, and already has). I can't have multiple hashtags in the URL - so am I left with no choice but to use javascript now?

Answer 1

Another way to do this, relatively positioned box holding absolutely positioned tabs and inline radio inputs and + in the selector to choose the visible one

<div class="tabbox">
    <label for="tab1">A</label>
    <input id="tab1" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">hello</div>
    <label for="tab2">B</label>
    <input id="tab2" type="radio" name="tab" class="tabchoice" />
    <div class="tabcontent">world</div>
</div>

.tabbox {
    position: relative;
}
.tabcontent {
    position: absolute;
    top: 20px;
    left: 0;
    display: none;
}
.tabchoice:checked + .tabcontent {
    display:block;
}

DEMO

You might need to do a bit more work for overflows etc, in production code

Answer 2

You can use radio buttons and a lot of css to create a non javascript tab control

<div id="content">
    <label class="what-tab" for="what-tab">What is </label>
    <label class="example-tab" for="example-tab">Examples</label>
    <input type="radio" name="tab" id="example-tab"/>
    <input type="radio" name="tab" id="what-tab" checked=""/>
    <div id="group">
         <div id="what">What</div>
         <div id="example">Example</div>
    </div>
</div>

#content label{
    width: 150px;
    height: 25px;
    display: block;
    float: left;
    text-align: center;
    line-height: 25px;
}
#content label:hover{
    color: white;
}
[name=tab]{
    position: absolute;
    visibility: hidden;
}
.what-tab{
    background-color: green;
}
.example-tab
{
    background-color: blue;
}
#group{
    clear: left;
    position: relative;
    height: 525px;
}
#group > div{
    position: absolute;
    height: 500px;
    width: 100%;
    opacity: 0;
    padding: 10px;
    overflow: auto;
    z-index: 1;
}
#what{
    border: solid 1px blue;
}
#example{
    border: solid 1px green;
}
#example > label{
    background-color: green;
}
#example > div{
    font-size: 18px;
    padding: 5px;
    display:none;
    clear:both;
}
#example-tab:checked ~ #group #example{
    opacity: 1;
    z-index: 2;
}
#what-tab:checked ~ #group #what{
    opacity: 1;
    z-index: 2;
}
input[name="eg-tab"]{
    display:none;
}
input + div{
    clear:both;
}

http://jsfiddle.net/FPD58/2/