Hi,

Link to my website NSFW

I have been trying to use code for 'tabs with only css without jquery'.
On inserting css in clearfix the post did not upload.
Now none of the posts show anything below header.

I tried similar thing in twentyfourteenchild, broke the site and got white screen, but didn't learn.

I'm sure your expertise will enable me to resolve this so that I get back my website
and hopefully I manage to get tab function in posts as well.

Thanks in advance,
Dr. Ashok

what exactly did you put and exactly where?

I get frequent database connection errors when I try to access your site. Where did you get the code for "tabs with only css without jquery?" It is hard to image that tabs can be implemented without some sort of scripting, because I would think an event handler would be needed to capture mouse clicks on the tabs.

Hi,

Thanks for your attention.

I can implement this "Only CSS-No jquery code for Tab" on a html page.

However, this doesn't work in these two WordPress themes I experimented, twentyfourteenchild and Mountezuma.

The code is incredibly simple and short.
If I am allowed to place it here below is the code.

CSS

input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

HTML

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
    First content
</div>
<input type="radio" id="two" name="tab" />
<div>
    Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
    Third content
</div>

SOURCE



http://jsfiddle.net/nzYnc/

http://stackoverflow.com/questions/4...using-only-css"

I inserted the CSS in Clearfix and HTML in the post.

Thanking you in anticipation,


What should I be doing?

Dr. Ashok

the CSS

div
{
    display: none;
}

says 'hid every <div...> on the page.

how many other div's do you think might exist?
your CSS is too general - try wrapping your html code in

<div id="tab-test">........</div>

then add 'div#tab-test' in front of all your CSS selectors - for example

div#tab-test div
{
    display: none;
}

Oh yeah, one other thing, not all answers you get from the internet actually work.