jquery - Open/Close multiple div with external content loaded -


i'm trying create portfolio loads external content when clicking on "read more". loading external content works fine , div animates should. got same div close , open when click on "read more" link.

my problem when click on same "read more" link div don't close, animates , load external content again.

i hope makes sense...

my html follows:

<div id="portfolio-content"></div>             <div id="isotope-container">                 <div class="element webdesign">                     <header>                         <h3>test title: webdesign</h3>                     </header>                     <img src="images/test_img_01.jpg" alt="" title=""/>                     <ul class="meta clearfix">                         <li>filter:</li>                         <li><a href="" title="webdesign">webdesign</a></li>                     </ul>                     <div class="read-more">                         <a href="portfolio-pages/page_1.html" title="read more &rarr;" class="more">read more &rarr;</a>                     </div>                 </div>                 <div class="element advertisement">                     <header>                         <h3>test title: advertisement</h3>                     </header>                     <img src="images/test_img_02.jpg" alt="" title=""/>                     <ul class="meta clearfix">                         <li>filter:</li>                         <li><a href="" title="advertisement">advertisement</a></li>                     </ul>                     <div class="read-more">                         <a href="portfolio-pages/page_2.html" title="read more &rarr;" class="more">read more &rarr;</a>                     </div>                 </div>             </div> 

and jquery is:

$(document).ready(function(){ $(".more").click(function(){     var href = $(this).attr('href');      if ($('#portfolio-content').is(':visible')) {         $('#portfolio-content').css({display:'block'}).animate({height:'1px'}).empty();     }      $('#portfolio-content').css({display:'block'}).animate({height:'200px'},function(){         $('#portfolio-content').html('<img class="loader" src="http://dev.push-media.no/final_site/images/loader.gif" alt="">');         $("#portfolio-content").load(href);     });      return false; });  $(".more").next().click(function(){     $("#portfolio-content").fadeout('normal'); }); }); 

seems you're doing more need when #portfolio-content visible. maybe try this:

http://jsfiddle.net/isherwood/f8dfb/3

#portfolio-content {     display: none; }  if ($('#portfolio-content').is(':visible')) {     $('#portfolio-content').slideup(); }  $('#portfolio-content').css({     display: 'block', height: '0' }).animate({     height: '200px' }, function () { ... 

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -