There is such code:
Js :

$(document).ready(function(){ var idsdfsd = $("#idpostcom").text(); $("#idrcom-"+ idsdfsd).click(function(){ $("#hidden-"+ idsdfsd).slideToggle("slow"); return false; }); });

HTML | PHP :

 <div class='bottom'> $likeordislike - <a class='hider' id='idrcom-$posttid'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</a> <div class='cllike'> <span id='cllike-".$post[id]."'>$cllike[0]</span> </div> </div> <div class='blcomments' id='hidden-$posttid' style='display: none;'> $blmesscomments ". ((($clcomment[0] !== '0') AND ($posttid == $commentpost)) ? "$blcomments" : "") . " <div class='blgocomment' style='padding: 0px;'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...' id='txtcom-$posttid'></textarea> <br /> <div id='idpostcom' style='display: none;'>141</div> <a onclick='postComment($(this));' class='btnredprof' style='float: right; margin-top: 5px; margin-bottom: 5px;'>Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ</a> </div> </div>

This is a slider (when you click on the button, the content unfolds).
The problem is that there are a lot of such html-blocks, how to make it so that when pressed in a block, the button drops out just below it?

I set id ( $posttid ) on each block.

I tried to implement this way:

 $(document).ready(function hidercom(){ $(".hider").click(function(){ $("#hidden").slideToggle("slow"); return false; }); }); <a class='hider' onClick='hidercom($(this));'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</a>

Still not working.

  • Probably so that the id on the page matches the id in the script - Dmitriy Kondratiuk
  • Learn to use classes and relative addressing in jquery. In the postComment, you $ (this) you guessed it - so why do you generate any monsters for a click to click? - Pavel Mayorov
  • @PavelMayorov fixed (in the description) still does not work - Sasha Osipov
  • Why do you have two handlers hanging at the same time? - Pavel Mayorov
  • one
    And where do you use relative addressing? - Pavel Mayorov

3 answers 3

An example implementation below. https://jsfiddle.net/bearwolf/rj1enn6a/5/

The parameter $ (this) does not need to be passed to the function. He is already there by default.
From my experience in js scripts in events it is better to use attributes or dat attributes. By the way, plus the data attribute is that it does not need to use parseInt or parseFloat. This functionality is implemented by default.

I use styles for css.

  $('[data-type="showComments"]').click(function(){ var _this = $(this); _this.closest('.comments').find('.blcomments').slideToggle("slow"); return false; }); $('textarea').on('keypress', function() { var max = 141, count, _this = $(this); count = max - _this.val().length; if (count <= 0) { count = 0; var text = _this.val().substring(0, max); _this.val(text); }; _this.closest('.block-comment').find('.counter').text(count); }); $('input[type="submit"]').on('click', function(){ var _this = $(this); //post alert('Successfully'); // saving }); 
 .comments{ margin-bottom:15px; } .show-commnets{ margin-left:20px; text-decoration:underline; } .block-comment{ } .block-comment textarea{ width:100px; } .counter{ padding-left:80px; font-size:12px; } .blcomments{ display:none; padding-top:10px; } .btnredprof{ float: right; margin-top: 5px; margin-bottom: 5px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class='comments'> <a class='show-commnets' data-type='showComments'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ поста 1</a> <div class='blcomments'> <div class='blgocomment'> <form> <div class='block-comment'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...'></textarea> <div class='counter'>141</div> </div> <p><input type='submit' class='addComment' value='Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ'></p> </form> </div> </div> </div> <div class='comments'> <a class='show-commnets' data-type='showComments'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ поста 2</a> <div class='blcomments'> <div class='blgocomment'> <form> <div class='block-comment'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...'></textarea> <div class='counter'>141</div> </div> <p><input type='submit' class='addComment' value='Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ'></p> </form> </div> </div> </div>

    As @PavelMayorov wrote correctly, the id not needed here, if the presented piece of code just repeats many times (did not change the author’s original code, you need to poke where the red frame is):

     $(document).ready(function() { $(".hider").click(function() { $(this).parent().next('.blcomments').slideToggle("slow"); }); }); 
     .hider { padding: 5px; border: 1px solid #d32d36; cursor: pointer; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='bottom'> $likeordislike - <a class='hider' id='idrcom-$posttid'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</a> <div class='cllike'> <span id='cllike-".$post[id]."'>$cllike[0]</span> </div> </div> <div class='blcomments' id='hidden-$posttid' style='display: none;'> $blmesscomments ". ((($clcomment[0] !== '0') AND ($posttid == $commentpost)) ? "$blcomments" : "") . " <div class='blgocomment' style='padding: 0px;'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...' id='txtcom-$posttid'></textarea> <br /> <div id='idpostcom' style='display: none;'>141</div> <a onclick='postComment($(this));' class='btnredprof' style='float: right; margin-top: 5px; margin-bottom: 5px;'>Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ</a> </div> </div> <div class='bottom'> $likeordislike - <a class='hider' id='idrcom-$posttid'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</a> <div class='cllike'> <span id='cllike-".$post[id]."'>$cllike[0]</span> </div> </div> <div class='blcomments' id='hidden-$posttid' style='display: none;'> $blmesscomments ". ((($clcomment[0] !== '0') AND ($posttid == $commentpost)) ? "$blcomments" : "") . " <div class='blgocomment' style='padding: 0px;'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...' id='txtcom-$posttid'></textarea> <br /> <div id='idpostcom' style='display: none;'>141</div> <a onclick='postComment($(this));' class='btnredprof' style='float: right; margin-top: 5px; margin-bottom: 5px;'>Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ</a> </div> </div> <div class='bottom'> $likeordislike - <a class='hider' id='idrcom-$posttid'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</a> <div class='cllike'> <span id='cllike-".$post[id]."'>$cllike[0]</span> </div> </div> <div class='blcomments' id='hidden-$posttid' style='display: none;'> $blmesscomments ". ((($clcomment[0] !== '0') AND ($posttid == $commentpost)) ? "$blcomments" : "") . " <div class='blgocomment' style='padding: 0px;'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...' id='txtcom-$posttid'></textarea> <br /> <div id='idpostcom' style='display: none;'>141</div> <a onclick='postComment($(this));' class='btnredprof' style='float: right; margin-top: 5px; margin-bottom: 5px;'>Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ</a> </div> </div>

    • It is necessary when clicking on .hider to open #hidden - Sasha Osipov
    • @ Sasha Osipov, id='hidden-$posttid' this one? - MasterAlex

    Instead of 141 will be a number that is unique for each block.

     $(document).ready(function() { $(".hider").click(function(){ var idsdfsd = $(this).attr('id'); $("#hidden-" + idsdfsd).slideToggle("slow"); return false; }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='hider' id='141'>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ($clcomment[0])</div> <div class='blcomments' id='hidden-141' style='display: none;'> <div class='blgocomment' style='padding: 0px;'> <textarea placeholder='ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ...' id='txtcom-$posttid'></textarea> <br/> <a onclick='postComment($(this));' class='btnredprof' style='float: right; margin-top: 5px; margin-bottom: 5px;'>Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ</a> </div>