Change image on .slideToggle() and preventing open div closing itself

Question

Currently, I have created a slideToggle() script focus on three separate div. div 2 is open at the start, and three buttons can toggle each div respectively. You can check my code further below to understand what I mean.

Now, I am trying to figure out some things that I can't seem to accomplish myself.

1) I am trying to make a button image change to an orange (other) image button when the div is open. Is there any way to make the image different when the div is active?

2) When the script is firstly loaded, the second div is active. Yet, when you click the 2nd button, it closes all the divs all together. Is there a way to make sure that when a button's related div is already open, to make sure that it remains open. This means that nothing will happen if I click the button of an already active div, but it closes the other active div and toggles another one if I click one of the other buttons.

I hope I explained it correctly. I see that some more people on here are experiencing somewhat similar problems, so perhaps some of the more professional coders can help us out. Thank you in advance.

This is my code:

https://jsfiddle.net/7xanx1tc/

jQuery(document).ready(function($) {

  //Start of Jquery


  $('.button1').click(function() {
    $('.developers').slideUp();
    $('.lockedin').slideUp();
    $('.product').slideToggle('slow');
  });

  $('.button2').click(function() {
    $('.product').slideUp();
    $('.developers').slideUp();
    $('.lockedin').slideToggle('slow');
  });

  $('.button3').click(function() {
    $('.product').slideUp();
    $('.lockedin').slideUp();
    $('.developers').slideToggle('slow');
  });


  // End of Jquery
});

.product {
  display: none;
}

.developers {
  display: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<h3>

  <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand" /> </h3>
<h3>
  <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand" /> </h3>
<h3>
  <img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand" /> </h3>

<div class="product">
  Testdiv1
</div>

<div class="lockedin">
  Testdiv2
</div>

<div class="developers">
  Testdiv3
</div>

Answer 1

In order to play with the consequences of changing an status you should use the callback of the toggle function. Let's use your second button as an example:

Question 1: If you want to display a different button once the first one has been clicked:

$('.button2').click(function(){
    $('.product').slideUp();
    $('.developers').slideUp();
    $('.lockedin').slideToggle('slow', function () {
        $('.button2').hide();
        $('.orange-button').show();
    });   
});
// Remember .orange-button should work similar to .button2

Question 2: To check the status of the button to avoid the "double toggle" effect you can implement a check like this:

$('.button2').click(function(){
    if ($('.lockedin').css('display') === 'none') {
        $('.lockedin').slideToggle('slow');
    }
    $('.product').slideUp();
    $('.developers').slideUp();   
});

Hope this answer is helpful ;)