Skip to main content

toogle div block - work not properly



I have a following code:







<div class="block review_block wrap"><ul class="comments_list">

<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:59</div>

<div class="nickname">

<a href="#">

Ослик Иа</a></div>

<div class="review_text">

<a>

Рецензия 3</a>

</div>

<p class="text">

Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас своими дедуктивными способностями. Да и Ватсон от него не отставал и всегда на подмогу приходил. В сравнении с первой частью юмора стало больше, но он <span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

не достигает той грани, когда понимаешь, что сценаристы перестарались с шутками, делая на них слишком высокую ставку. А уж переживаний прибавилось столько, что просто сердечко так и надрывалось. Прослезилась в нескольких местах, а в одном и просто всплакнула. Но, тут без спойлеров.



А сейчас, я скажу о сцене, которая по моему мнению должна быть как-то действительно оценена. Это сцена погони в лесу. Настолько динамично, энергично, невообразимо и захватывающе, что слов не хватает. Наслаждаешься каждой секундой, каждым кадром. Эта сцена даже зрителю передаёт свои силы. Просто браво!



Так что заставила меня «игра теней» возвращать домой с широкой улыбкой на лице, а зал аплодировал очень громко и звонко, за что ему отдельное спасибо.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Comment</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="3" type="Publication" eventid="4" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>







<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=2e722edb-8649-43af-b468-a2b489c467fb.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:22</div>

<div class="nickname">

<a href="#">

Антон</a></div>

<div class="review_text">

<a>

Рецензия 2</a>

</div>

<p class="text">

Авторы ушли из Лондона, и это действительно хороший ход. Атмосфера и краски остались теми же, но место событий поменялось, и всё менялось и менялось по ходу действия фильма. Временами всё было так красиво, что аж дух захватывало. Хотелось суметь уловить каждую деталь, каждый миллиметр, но всё было т<span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

ак динамично, что это сделать было достаточно сложно. Хотя этот факт ни сколечко не уменьшает прекрасность «Игры теней». Атмосферу помогала поддерживать всё так же великолепная музыка Ханса Циммера, которая местами была точь-в-точь как и в первом фильме. Что особенно касается титров, которые всё такие же привлекательные, и прошлая музыка им ни капельки не мешает, а наоборот, только навивает приятные воспоминания об ощущениях, которые возникли в своё время после просмотра предыдущей ленты в такой же момент титров, когда люди начали вставать и потихоньку уходить из зала с интересом глядя на экран.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Комментировать</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="2" type="Publication" eventid="1" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>



</ul></div>







There are two div with block section-comments_for_photo class.





I want that user clicks on Comment ( iComment class) then data loading into div( block section-comments_for_photo ). My code:







$(document).ready(function() {

$('.block.section-comments_for_photo').each(function() {

$(this).hide();

});

$(".iComment").click(function() {

var id = <%=Model.OID %> ;

var section = $(this).closest(".comments_list").first(".block.section-comments_for_photo");

$(section).load("/Publication/GetCommentsForPublication?id=" + id, function() {

$(this).toggle(400);

return false;

});

});

});







This code loads the data but it delete all html from block review_block wrap . Where is problem?





Thanks.





UPDATE: JSFiddle


Comments

  1. You wrongly use jQuery.first. It doesn't do what you expect it to.

    Use find instead.

    $(".iComment").click(function() {
    var section = $(this).closest(".comments_list").find(".block.section-comments_for_photo");

    $(section).toggle(400);
    return false;
    });


    Updated jsfiddle.

    ReplyDelete
  2. toggle(400) meens that it will be shown during 400 milliseconds.
    If you want to show it for a longer time (eg 4 seconds) you have to put toggle(4000).

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?