在幻灯片切换时，当div处于活动状态时更改图像

Question

我目前有一个设置有三个单独的按钮，打开三个div。我想在开始时打开一个div（即lockedin）。此外，当按钮打开另一个按钮时，div应该关闭，我现在已经完成了。

还有一件我需要的东西似乎无法正常工作。有没有办法显示哪个div当前有效？因此，当页面加载时，button2显示一个橙色填充按钮（我有一个图像），另外两个按钮显示白色填充按钮。当通过例如按钮1选择另一个div时，按钮2应该变为白色填充按钮，并且按钮1应该变为橙色填充按钮。我有图像SRC，但只是不知道如何根据给定div的活动状态选择图像。

提前谢谢。

  jQuery(document).ready(function( $ ){
    
    //Start of Jquery


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

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

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

    // End of Jquery
});

.product {
  display:none;
  color: yellow;
}

.lockedin {
  color:yellow;
}

.product_active{
  display:none;
  }

.developers {
  display:none;
  color: yellow;
}

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

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

<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product_active.png" class="product_active" alt="product_active" />

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

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

<div class="product">
 Testdiv1
 </div>
 
 <div class= "lockedin">
 Testdiv2
 </div>
 
 <div class = "developers">
 Testdiv3
 </div>