0
На моей странице html у меня было содержимое всплывающей подсказки (построено css-элементом только без javascript). Я намереваюсь вставлять один контент аккордеона (только с 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 <[email protected]>
* 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>
Но когда я поставил «гармошку вертикаль» Div внутри всплывающей «поп-box2b», аккордеон, кажется, появляются в никуда, а не внутри tooltip 'pop-box2b' area, и я не могу найти, где находится.
Оба этих содержимого (подсказка & аккордеон) используют флажки.
не может быть, потому что я использовал 2 флажка на этой же странице?
Может кто-нибудь помочь мне найти, если что-то не так в этом коде, если они неправильно помещены/изменены содержание аккордеона?
Почему бы не использовать аккордеон, если я поместил его внутри всплывающей подсказки всплывающей подсказки?
THx @Gavin Вуда за предоставленную мне более ясное Sample меня :) вот что я имею в виду, чтобы работать. Я изменю некоторую позицию и другие анимационные вещи – ask91
вот что я точно имею в виду