In my html page, i had a tooltip content(built by css element only without javascript).i intend to insert a single accordion content(built by css only too) that scroll up when it's clicked, inside the tooltip content.Here's sample of my CSS and HTML code:\[code\]<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
ointer; 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>\[/code\]But when i put the 'accordion vertical' div inside the tooltip 'pop-box2b', the accordion seem to appear in nowhere, not inside the tooltip 'pop-box2b' area and i cant find where its located. Both of those content(tooltip & accordion) use checkboxes.could it be because i used 2 checkboxes in the same page?can someone help me to find if something wrong in that code, if im wrongly placed/modify the accordion content?why wont accordion appear if i put it inside tooltip popbox area?
ointer; 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>\[/code\]But when i put the 'accordion vertical' div inside the tooltip 'pop-box2b', the accordion seem to appear in nowhere, not inside the tooltip 'pop-box2b' area and i cant find where its located. Both of those content(tooltip & accordion) use checkboxes.could it be because i used 2 checkboxes in the same page?can someone help me to find if something wrong in that code, if im wrongly placed/modify the accordion content?why wont accordion appear if i put it inside tooltip popbox area?