Todo list

In general, when I press this arrow (to collapse the description of the case), then it behaves strangely, then it hides, it does not, it twitches. They said that the error is in the Js code, delegation is incorrect, please tell me.

function blockDescription() { $(".button-edit").click(function() { console.log('asd'); $(this).parents('.add-list').find('.add-description').slideToggle(); var description = $('.add-description'); let visible = description.is(':visible'); visible ? description.hide() : description.show(); let rot = 'rotate(' + (visible ? 0 : 90) + 'deg)'; $(".button-edit").css({ '-webkit-transform': rot, '-moz-transform': rot, '-ms-transform': rot, '-o-transform': rot, 'transform': rot }); }); }; 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="add-list"> <div class="list-opened"> <div class="title-line"> <span>'+ input +'</span> <button class="button">Button</button> <button class="button-edit">Button-Edit</button> </div> <div class="add-description">'+ textarea +'</div> </div> </div> 

  • one
    State of visibility / invisibility, as well as the rotation of the arrow must be in the css! In js, you simply add / remove the desired class. - DaemonHK

1 answer 1

You have two times triggered show / hide item on the click! Corrected. Correct rotate if necessary.

 function blockDescription() { $(".button-edit").click(function() { console.log('asd'); //$(this).parents('.add-list').find('.add-description').slideToggle(); var description = $(this).parents('.add-list').find('.add-description'); let visible = description.is(':visible'); visible ? description.slideUp() : description.slideDown(); let rot = 'rotate(' + (visible ? 0 : 90) + 'deg)'; $(".button-edit").css({ '-webkit-transform': rot, '-moz-transform': rot, '-ms-transform': rot, '-o-transform': rot, 'transform': rot }); }); };