I have been learning how to make websites and was able to make one, yet I got into a bug that involves FlexSlider, I have to add multiple flexsliders one in each accordion, everything looks fine, yet the slider doesn't work all the time, it seems that the hidden attribute of the accordion is messing with it, the website is:
http://iplagunera.com/modelos.html the first two accordions have flexslider, sometimes it works sometimes it doesn't, the code I'm using is the following:
<div class="accordion">
<div class="accord_cont">
<div class="flexslider">
<ul class="slides">
<li>
<img src="./index2_files/sa/1.jpg" alt="">
</li>
<li>
<img src="./index2_files/sa/2.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
While the Jscript code is the following:
<!-- CALL FLEX SLIDER -->
<script>
$(".accordion h3").click(function(){
$('.flexslider').flexslider({
pauseOnHover: false,
slideshow: true,
slideshowSpeed: 4000
animationSpeed: 1300,
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: false,
directionNav: true
});
});
</script>
<!-- CALL ACCORDION -->
<script>
$(".accordion h3").eq(0).addClass("active");
$(".accordion .accord_cont").eq(0).show();
$(".accordion h3").click(function(){
$(this).next(".accord_cont").slideToggle("slow")
.siblings(".accord_cont:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
</script>
I'm pretty sure it's something simple, like the accordion loading at the same time as the flexslider, while it should be first the accordion and once loaded the flexslider, so zfgc any help D:?
