Aca les paso todo, CSS, Js y html. Mil gracias!
Código:
<style> .category { width: 85%; border: 1px solid #878685; background-color:white; border-spacing: 0px; } .accordian { width: 85%; border: 1px solid #878685; margin-left: 50px; margin-right: 20px; margin-top: 10px; margin-bottom: 10px; border-spacing: 0px; } .accordian li { list-style-type: none; padding-top:7px; padding-left: 5px; padding-bottom: 2px; } .dimension { height: 400px; } .even, .odd , .titlecategory{ font-weight: bold; height: 20px; border: 1px solid #878685; border-spacing: 0px; padding-top:7px; padding-left: 5px; padding-bottom: 2px; font-family: Tahoma; font-size: 12px; font-weight: bold; border-bottom-width: 1px; border-bottom-width-ltr-source: physical; border-bottom-width-rtl-source: physical; border-top-width: 0; border-top-width-ltr-source: physical; border-top-width-rtl-source: physical; } .titlecategory { color:white; background-attachment: scroll; background-clip: border-box; background-color: #878685; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; } .even { background: #D9DADE; color:#F01000; } .odd { background: #D9DADE; color:#F01000; } </style> <script type="text/javascript"> $(function() { // Hide all the content except the first $('.accordian li:odd:gt(0)').hide(); $('.accordian li:odd').addClass('dimension'); $('.accordian li:even:even').addClass('even'); $('.accordian li:even:odd').addClass('odd'); $('.accordian li:even').css('cursor', 'pointer'); $('.accordian li:even').click( function() { var cur = $(this).next(); var old = $('.accordian li:odd:visible'); if ( cur.is(':visible') ) return false; old.slideToggle(500); cur.stop().slideToggle(500); $(this).stop().animate( { paddingLeft:"30px",background:"#DDDDDD" } ); old.prev().stop().animate( { paddingLeft:"5px" } ); } ); function openpanel(id) { var cur = $("#"+id); //alert(cur) //hide all tabs $('.accordian li:odd').hide(); //$('#title_'+id).append("<div class='accordion-collapse'></div>") $('#title_'+id).show(); $('#'+id).slideToggle(100); } var theUrl = window.location.href; var hashValue = theUrl.split('#')[1]; openpanel(hashValue); }); </script> <div><br> ver</div> <div class="category" id="general"> <div class="titlecategory" id="titlegeneral">General</div> <div class="accordian" id="accordiangeneral"> <ul style="margin-left: 0px;"> <li id="title_registration">Registracion</li> <li id="registration"> <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxx" frameborder="0" allowfullscreen></iframe> </p> </li> <li id="title_howlistitem">item2</li> <li id="howlistitem"> <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxx" frameborder="0" allowfullscreen></iframe> </p> </li> <li id="title_forgot">item3</li> <li id="forgot"> <p><iframe width="640" height="360" src="//www.youtube.com/embed/xxxxxxxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe> </p> </li> </ul> </div> </div>