Menu
a href links are not working inside of a accordion when click the a href links. It seems that the JS function of accordion overwrites the a href links. Now clicking the link, instead of opening another page, it expands in and out(this is the function the JS for), which is the original function of the JS. What I want to do is keeping the accordion function, and make the a href links work. Here is the example code: http://jsfiddle.net/mrPWa/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
height = $(window).height();
$('.Accord').css({height: height});
$('.Accord').toggle(function() {
$('.Accord').animate({width: "20%"}, 500 );
$(this).removeClass('deSelect');
$(this).animate({ width: "40%"}, {duration: 500, queue: false});
$('.deSelect').animate({width: "15%"}, {duration: 500, queue: false});
$(this).addClass('deSelect');
}, function() {
$('.deSelect').animate({width: "20%"}, 500);
});
});
The a href links are here.
<body>
<div id="Sponsorships_index">
<div id="accordionWrapper">
<ol>
<li id="snow" class="Accord deSelect">
<a href="http://www.apple.com/">
<h1>Apple link is not working!!!!!</h1></a>
</li>
<li id="street" class="Accord deSelect">
<a href="http://www.apple.com/">
<h1>Apple link is not working!!!!!</h1></a>
</li>
<li id="water" class="Accord deSelect">
</li>
<li id="dirt" class="Accord deSelect">
</li>
<li id="sound" class="Accord deSelect">
</li>
</ol>
</div>
</div>
</body>
589
add this to the end of your toggle function
.on('click', 'a', function(e) { e.stopPropagation(); })
to prevent the event from bubbling up.
so you end up with
$('.Accord').toggle(function() {
$('.Accord').animate({ width: "20%" }, 500)
$(this).removeClass('deSelect')
$(this).animate({ width: "40%" }, { duration: 500, queue: false })
$('.deSelect').animate({ width: "15%" }, { duration: 500, queue: false })
$(this).addClass('deSelect')
}, function () {
$('a').click(function(e) { e.stopPropagation(); })
$('.deSelect').animate({ width: "20%" }, 500)
}).on('click', 'a', function(e) { e.stopPropagation(); })
test it here: http://jsfiddle.net/RASG/sSG2f/
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
