Hola, queria preguntarles ya que arregle un viejo codigo de un acordeon que muestar videos y se ve bien en FF y Chrome pero no en IE10 . Es esencialmente una lista de UL y LI pero quizas algun experto con un vistzo rapido ve algun error o me indica algun hack o parche para que funcione.
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>