I am in need of a solution that must be achieved using only CSS, with no JavaScript involved.
JSFiddle: http://jsfiddle.net/hen75c3g/3/
Upon loading the page, the default content is displayed. When the first tab is clicked, the corresponding content is shown. I want the default content to disappear and the related content to appear when other tabs are clicked.
This should all be accomplished exclusively through CSS without any Javascript. Is it possible?
.accordion {
width:830px;
overflow:hidden;
margin:10px auto;
color:#474747;
padding:10px;
border:1px solid black;
}
.accordion section h2 {
display:none;
}
.accordion section h2 a {
float:left;
overflow:hidden;
cursor:pointer;
margin:10px;
padding:10px;
font-size:12px;
color: #000;
text-decoration:none;
width:100%;
}
.accordion section p {
display:none;
}
.accordion section:after {
font-size:24px;
color:#fff;
font-weight:bold;
}
.accordion section h2 {
position:relative;
}
.accordion section p.default {
clear:both;
display:block;
}
.accordion section:target p {
clear:both;
display:block;
} <div class="_m-container">
<div class="accordion">
<ul class="_m-menu">
<li><a href='#tab-1'>Tab 1</a>
</li>
<li><a href='#tab-2'&
I would appreciate any help or advice on achieving this layout only using CSS.
Thank you.