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 →" class="more">read more →</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 →" class="more">read more →</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
Post a Comment