Trying to get jQuery to change a different img src when clicked

Question

I've got 2 seperate divs that change background img src when clicked which works fine, but I would like it to change the other image its present with. E.g. div 1 is pressed and becomes "open", if div2 is "open" it then becomes closed. My jQuery is rather limited and have it functioning where it can change the image, but need to figure out how to apply the "closed" class to images that haven't just been clicked. Ideally it would use the attr() so I can add more later.

jQuery

$(".box").on("click", function() {
      
      // need to make this function select the other div.
      if ($(this).hasClass("closed")) {
        $(this).addClass("open").removeClass("closed");
      } else {
        $(this).addClass("closed").removeClass("open");
      }
      
      var id = $(this).attr("data-id");
      $(this).toggleClass("open");
      $(".hideDivs").hide();
      $("#" + id).show();  
    });

 .container {
      width: 640px;
      height: 450px;
      background-color: #eee;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    
    .text-primary {
      font-size: 14px;
      text-align: center;
      margin-bottom: 5px;
    }
    
    .box {
      cursor: pointer;
      width: 90px;
      height: 180px;
      display:block;
      margin:auto;
      background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
    }
    
    .open {
      background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/open_ihcmuz.png");
    }
    
    .closed {
      background-image: url("http://res.cloudinary.com/dez1tdup3/image/upload/v1499052120/closed_vo1pn2.png");
    }
    
    .hideDivs {
      display: none;
    }
    
    .panel-body {
      padding: 10px;
      margin-top: 5px;
    }
    
    .title {
      font-weight: bold;
      font-size: 14px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <div class="row">
        <div class="col-xs-6">
          <div class="box" data-id="divId1">
          </div>
        </div>
        <div class="col-xs-6">
          <div class="box" data-id="divId2">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div class="panel panel-default hideDivs" id="divId1">
            <div class="panel-body">
              <span class="title">Practices for safe packaging of cooked foods</span>         
              <ul>
                <li>Label and date all food.</li>
                <li>Package high-risk food in small batches for refrigeration and return to refrigerated storage as soon as possible (within 20 minutes).</li>
                <li>Store packaging products in a clean environment and protect from contamination.</li>
              </ul>          
            </div>
          </div>
          <div class="panel panel-default hideDivs" id="divId2">
            <div class="panel-body">
              <span class="title">Practices for safe freezing of cooked foods</span>
              <ul>
                <li>When packaging food for freezing, cover or wrap, label and date (production and freezing date) all foods.</li>
                <li>Freeze food in small quantities to ensure food is frozen quickly.</li>            
                <li>Do not overload freezer units and ensure air can circulate.</li>
                <li>Do not freeze foods that have been cooked then refrigerated and reheated.</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

Please check the jsfiddle and let me know if you are looking something like this. https://jsfiddle.net/314sybno/2/

$(".box").on("click", function() {
    var id = $(this).attr("data-id");
    if( id === 'divId1') {
        $('div[data-id="divId2"]').addClass('closed').removeClass('open');
    } else {
        $('div[data-id="divId1"]').addClass('closed').removeClass('open');
    }

    // need to make this function select the other div.
    if ($(this).hasClass("closed")) {
        $(this).addClass("open").removeClass("closed");
    } else {
        $(this).addClass("closed").removeClass("open");
    }
    $(".hideDivs").hide();
    $("#" + id).show();  
});

Answer 2

This might be a better approach:

$(".box").on("click", function() {
    // Hide all detail divs
    $(".hideDivs").hide();

    if ($(this).is(".closed")) {
        // Close other open boxes
        $(".box.open").removeClass("open").addClass("closed");
        // Open this box and show the corresponding details div
        $(this).removeClass("closed").addClass("open");
        var id = $(this).attr("data-id");
        $("#" + id).show();  
    } else {
        // Close this box
        $(this).removeClass("open").addClass("closed");
    }

});

Also, I would recommend changing your HTML to have your 'box' elements also have a 'closed' class, so you do not repeat/need the CSS background attribute on the 'box' class.

See it working on this fiddle