CODEWITHSUNDEEP
javascriptjqueryhtml
7537247
7537247

Reputation: 323

a href links are not working inside of a accordion, it seems Javascript overwrites click function

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>

Upvotes: 4

Views: 5511

Answers (1)

yodog
yodog

Reputation: 6232

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/

Upvotes: 3

Related Questions