私のhtmlページには、ツールチップのコンテンツがありました（javascriptなしでcss要素のみで構築されました）。ツールチップのコンテンツ内に、クリックするとスクロールアップする単一のアコーディオンコンテンツ(cssのみで構築されたもの)を挿入するつもりです。
これが私のCSSとHTMLコードのサンプルです:
<html>
<head>
<!-- SOURCE accordion CSS jsfiddle.net/m_raffaele/E4acF/ -->
<!-- SOURCE tooltip CSS http://inserthtml.com/demo/pop-in-dialogue/ -->
<style>
.id-content {
width: 608px; height: 854px;
margin:0 auto;
background:yellow;
}
/* TOOLTIP Bawah */
.container-2b {
width:608px; height:854px;
position: relative;
float:right;
z-index:15;
margin: 0 auto;
}
.container-2b input {
display: none;
}
.container-2b input:checked + .popbox-2b {
opacity: 0.9;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
font-variant: normal;
padding:10px 5px 5px 5px;
}
/* ICON klik url(../../images/idsirtii/b4tap.jpg); background-size:99px 130px;*/
.container-2b label {
width:99px; height:130px;
position: relative;
float:right; margin-top:-182px;
background-color:green;
}
.container-2b label:checked + {
width:99px; height:130px;
position: relative;
float:right;
background-color:red;
}
/*buat kotak tooltip POP UP yg muncul*/
.popbox-2b {
width:598px; height: 830px; background: grey;
border: 1px solid transparent; opacity: 0;
position: relative;
margin-top:-182px;
z-index: 10;
color:white;
font-size:12px; font-family: "scada-regular"; color:white;
text-align:center; line-height:1.5em;
box-shadow-opacity;0.5;
/*gradien warna
box-shadow: inset 0px 40px 60px -30px rgba(200,200,255,1), 0px 0px 20px rgba(0,0,0,0.1);
/* border-radius: 7px; efek ujung tumpul */
-moz-perspective: 1000;
-ms-perspective: 1000;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transition: all fade;
-moz-transition: all fade;
-ms-transition: all fade;
}
/*****************************************
ACCORDION TAB
******************************************/
/*
*
* Author: Michael Raffaele <michael@mraffaele.com>
* Date: 25th October 2011
* Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*
*/
/* Shared for all accordion types margin-top:-500px; */
.accordion {
width:550px;
font-family:"strait"; font-size:14px;
margin:0 auto;
background:#fcf;
position:absolute;
bottom: 0px;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
position:relative; bottom:0;
background:blue; display:block;
cursor:pointer;
font-size:16px; color:white; line-height:16px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:red;
color:#FFF;
}
.accordion .content-acc {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:red;
margin:0 0 10px;
}
.accordion h3 {
color:blue;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
/* border:1px solid #542437; We don't want the border to disappear on hover */
}
.vertical ul li .content-acc {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content-acc, .vertical [type=checkbox]:checked ~ label ~ .content-acc {
height:300px;
/*border:1px solid #542437; */
}
</style>
</head>
<body>
<div class="id-content">
<!--TOOLTIP-->
<div class="container-2b">
<label for="activate-2b" class="container-2b"></label>
<input type="checkbox" name="activate-2b" id="activate-2b" />
<div class="popbox-2b"></div>
</div>
<!--div TOOLTIP-->
<!--ACCORDION-->
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">This is an example accordion item</label>
<div class="content-acc">
<br/ >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem
luctus porttitor vestibulum, eros sapien mattis libero, euismod congue
neque nisi at ipsum. Mauris semper ipsum sit amet metus semper
malesuada. Donec vel est justo, ac porta diam.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
しかし、ツールチップ 'pop-box2b' 内に 'アコーディオン垂直' div を配置すると、アコーディオンはツールチップ 'pop-box2b' 領域内ではなく、どこにも表示されないようで、どこにあるのかわかりません。
これらのコンテンツ (ツールチップとアコーディオン) はどちらもチェックボックスを使用します。
同じページで2つのチェックボックスを使用したためでしょうか?
アコーディオンのコンテンツを間違って配置/変更した場合、誰かがそのコードに何か問題があるかどうかを見つけるのを手伝ってもらえますか?
ツールチップ ポップボックス領域内にアコーディオンを配置すると、アコーディオンが表示されないのはなぜですか?