How to show/hide chosen image on button click in query-CodePudding

I would really appreciete any help in the following task. The task is pretty simple. I have a couple of paragraphs of text. Each paragraph has a title and desription. Decription should be hidden, and shown only after clicking "plus" button. On click "plus" icon should change to "minus". So far, I have maganed to acheve this. But then, after clicnkin again, text should hide again (that works), but the icon should change to "plus" again. And here I am failing. I have tried many ideas I found in the Internet, but could't make it working.

My HTML code:

<div class='toggle-description'>
    <p class='event-type speaker-country'>$event_type</p>
     <button class='plus-button'>
      <img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
      <img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
     </button>
    <h4 class='lt-opis'>$event_title</h4>
    <div class='more-text' style='display: none;'>
     <p>$event_description</p>
    </div>
</div>

jQuery code:

$(document).ready(function() {
 $(".minus-icon").hide();
  $(".plus-button").click(function(){
    $(this).closest(".toggle-description").find(".more-text").toggle();
    var button_plus = $(this).closest(".toggle-description").find(".plus-icon");
    button_plus.css("display", "none");
    var button_minus = $(this).closest(".toggle-description").find(".minus-icon");
    button_minus.css("display", "block");
  });
 });

CodePudding user response：

$(document).ready(function() {
 $(".minus-icon").hide();
  $(".plus-button").click(function(){
    $(this).find(".plus-icon").toggle();
    $(this).find(".minus-icon").toggle();
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle-description'>
    <p class='event-type speaker-country'>$event_type</p>
     <button class='plus-button'>
      <img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
      <img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
     </button>
    <h4 class='lt-opis'>$event_title</h4>
    <div class='more-text' style='display: none;'>
     <p>$event_description</p>
    </div>
</div>

CodePudding user response：

In the jquery part change this button_plus.css("display", "none"); to button_plus.toggle() and button_minus.css("display", "block"); to button_minus.toggle() and it works.

jsfiddle link