:target 타겟을 이용하여 수평 아코디언 작업중인데요 오로지 css 로만요
그런데 문제는 첫번째 타겟이 처음부터 열렸으면 좋겠는데 닫혀 있어서요 active 도 써보고 하였는데 안되어서요 방법 혹시아실까요
<article class="accordion">
<section id="acc1">
<h2><a href="#acc1">Title One</a></h2>
<p>This content appears on page 1.</p>
</section>
<section id="acc2">
<h2><a href="#acc2">Title Two</a></h2>
<p>This content appears on page 2.</p>
</section>
<section id="acc3">
<h2><a href="#acc3">Title Three</a></h2>
<p>This content appears on page 3.</p>
</section>
<section id="acc4">
<h2><a href="#acc4">Title Four</a></h2>
<p>This content appears on page 4.</p>
</section>
<section id="acc5">
<h2><a href="#acc5">Title Five</a></h2>
<p>This content appears on page 5.</p>
</section>
<section id="acc6">
<h2><a href="#acc6">Title six</a></h2>
<p>This content appears on page 6.</p>
</section>
<section id="acc7">
<h2><a href="#acc7">Title seven</a></h2>
<p>This content appears on page 7.</p>
</section>
</article>
<style>
.accordion #acc1{background:#ededed; }
.accordion #acc1:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc2{background:#ffffff; }
.accordion #acc2:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc3{background: #ededed; }
.accordion #acc3:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc4{background: #ffffff; }
.accordion #acc4:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc5{background: #ededed; }
.accordion #acc5:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc6{background: #ffffff; }
.accordion #acc6:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
.accordion #acc7{background: #ededed; }
.accordion #acc7:target{background:url('https://needsmine0102.cafe24.com/acodian01.jpg')no-repeat;}
body{padding:0;margin: 0;}
article.accordion
{
display: block;
width: 100%;
margin: 0 auto;
overflow: auto;
}
article.accordion section
{
position: relative;
display: block;
float: left;
width: 8.33%;
height: 100%;
color: #333;
background-color: #333;
overflow: hidden;
}
article.accordion section h2
{
position: absolute;
font-size: 1em;
font-weight: bold;
width: 12em;
height: 2em;
top: 12em;
left: 0;
text-indent: 1em;
padding: 0;
margin: 0;
color: #ddd;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
article.accordion section h2 a
{
display: block;
width: 100%;
line-height: 2em;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.accordion section:target
{
width: 50%;
padding: 0;
color: #333;
background-color: #fff;
}
article.accordion section:target h2
{
position: static;
font-size: 1.3em;
text-indent: 0;
color: #333;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
article.accordion section,
article.accordion section h2
{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
</style>
안녕하세요~^^
JS 없이 가장 간단한 방법은
주소창에 #target1 을 넣어두는 것이
아닐까 합니다.
혹은 nth-child 속성을 활용해보시는 것도 좋을 듯 합니다.
고맙습니다.